diff --git a/.env.example b/.env.example
index 12655715..26b25fb2 100644
--- a/.env.example
+++ b/.env.example
@@ -8,3 +8,6 @@ AUTH_REDIRECT_PROXY_URL="http://localhost:3000/api/auth"
 GITHUB_CLIENT_ID=""
 GITHUB_CLIENT_SECRET=""
 GITHUB_AUTH_TOKEN=""
+
+# Local default textures repository path
+DEV_LOCAL_REPOSITORY_PATH=""
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 00000000..124d9396
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,59 @@
+'use strict';
+
+module.exports = {
+	extends: 'next/core-web-vitals',
+	plugins: [
+		'unused-imports',
+		'custom-rules',
+	],
+	rules: {
+		'comma-dangle': ['error', 'always-multiline'],
+		'object-curly-spacing': ['warn', 'always'],
+		'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+		'import/order': [
+			'error',
+			{
+				'newlines-between': 'always',
+				groups: [
+					'builtin',
+					'external',
+					'internal',
+					['parent', 'sibling', 'index'],
+					'type',
+				],
+				pathGroups: [
+					{
+						pattern: 'react',
+						group: 'builtin',
+						position: 'after',
+					},
+					{
+						pattern: 'react-icons/**',
+						group: 'builtin',
+						position: 'after',
+					},
+					{
+						pattern: 'next/**',
+						group: 'builtin',
+						position: 'before',
+					},
+				],
+				pathGroupsExcludedImportTypes: ['react', 'react-icons/**', 'next/**'],
+				alphabetize: {
+					order: 'asc',
+					caseInsensitive: false,
+				},
+			},
+		],
+		indent: ['error', 'tab', { SwitchCase: 1 }],
+		'no-multi-spaces': ['error', { ignoreEOLComments: true }],
+		'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1 }],
+		quotes: ['error', 'single'],
+		semi: ['error', 'always'],
+		'unused-imports/no-unused-imports': 'error',
+
+		'custom-rules/page-export-naming': 'error',
+		'custom-rules/layout-export-naming': 'error',
+	},
+};
+
diff --git a/.eslintrc.json b/.eslintrc.json
deleted file mode 100644
index 254a7285..00000000
--- a/.eslintrc.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-	"extends": "next/core-web-vitals",
-	"plugins": ["unused-imports"],
-	"rules": {
-		"comma-dangle": ["error", "always-multiline"],
-		"object-curly-spacing": ["warn", "always"],
-		"import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-		"import/order": [
-			"error",
-			{
-				"newlines-between": "always",
-				"groups": ["builtin", "external", "internal", ["parent","sibling", "index"], "type"],
-				"pathGroups": [
-					{
-						"pattern": "react",
-						"group": "builtin",
-						"position": "after"
-					},
-					{
-						"pattern": "react-icons/**",
-						"group": "builtin",
-						"position": "after"
-					},
-					{
-						"pattern": "next/**",
-						"group": "builtin",
-						"position": "before"
-					}
-				],
-				"pathGroupsExcludedImportTypes": [
-					"react", "react-icons/**", "next/**"
-				],
-				"alphabetize": {
-					"order": "asc",
-					"caseInsensitive": false
-				}
-			}
-		],
-		"indent": ["error", "tab", { "SwitchCase": 1 }],
-		"no-multi-spaces": ["error", { "ignoreEOLComments": true }],
-		"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
-		"quotes": ["error", "single"],
-		"semi": ["error", "always"],
-		"unused-imports/no-unused-imports": "error"
-	}
-}
diff --git a/eslint-plugins/eslint-plugin-custom-rules.cjs b/eslint-plugins/eslint-plugin-custom-rules.cjs
new file mode 100644
index 00000000..617a2a02
--- /dev/null
+++ b/eslint-plugins/eslint-plugin-custom-rules.cjs
@@ -0,0 +1,8 @@
+const plugin = {
+	rules: {
+		'page-export-naming': require('./rules/page-export-naming.cjs'),
+		'layout-export-naming': require('./rules/layout-export-naming.cjs'),
+	},
+};
+
+module.exports = plugin;
diff --git a/eslint-plugins/package.json b/eslint-plugins/package.json
new file mode 100644
index 00000000..37408c2d
--- /dev/null
+++ b/eslint-plugins/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "eslint-plugin-custom-rules",
+	"type":"module",
+  "version": "1.0.0",
+  "main": "eslint-plugin-custom-rules.cjs",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}
diff --git a/eslint-plugins/rules/layout-export-naming.cjs b/eslint-plugins/rules/layout-export-naming.cjs
new file mode 100644
index 00000000..99a8102c
--- /dev/null
+++ b/eslint-plugins/rules/layout-export-naming.cjs
@@ -0,0 +1,57 @@
+const { sep } = require('path');
+
+module.exports = {
+	meta: {
+		type: 'problem',
+		docs: {
+			description: 'Enforce the default export names to ends with "Layout" in layout.tsx files',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		messages: {
+			invalidExportName: 'Default export name must ends with "Layout"',
+			invalidExportType: 'Default export must be a function',
+		},
+		fixable: 'code',
+		schema: [],
+	},
+	/**
+	 * @param {import('eslint').Rule.RuleContext} context
+	 */
+	create(context) {
+		const filename = context.filename.split(sep).pop();
+		if (filename !== 'layout.tsx') return {};
+
+		return {
+			ExportDefaultDeclaration(node) {
+				if (node.declaration.type === 'FunctionDeclaration' || (node.declaration.type === 'ArrowFunctionExpression' && node.declaration.id)) {
+					/**
+					 * @type {string | undefined}
+					 */
+					const functionName = node.declaration.id && node.declaration.id.name;
+
+					if (functionName && !functionName.endsWith('Layout')) {
+						context.report({
+							node,
+							messageId: 'invalidExportName',
+							fix(fixed) {
+								const newName = `${functionName}Layout`;
+								const start = node.declaration.id.range[0];
+								const end = node.declaration.id.range[1];
+								return fixed.replaceTextRange([start, end], newName);
+							},
+						});
+					}
+				}
+
+				if (node.declaration.type === 'Identifier') {
+					context.report({
+						node,
+						messageId: 'invalidExportType',
+					});
+				}
+			},
+		};
+
+	},
+};
diff --git a/eslint-plugins/rules/page-export-naming.cjs b/eslint-plugins/rules/page-export-naming.cjs
new file mode 100644
index 00000000..bf8469b9
--- /dev/null
+++ b/eslint-plugins/rules/page-export-naming.cjs
@@ -0,0 +1,57 @@
+const { sep } = require('path');
+
+module.exports = {
+	meta: {
+		type: 'problem',
+		docs: {
+			description: 'Enforce the default export names to ends with "Page" in .tsx files',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		messages: {
+			invalidExportName: 'Default export name must ends with "Page"',
+			invalidExportType: 'Default export must be a function',
+		},
+		fixable: 'code',
+		schema: [],
+	},
+	/**
+	 * @param {import('eslint').Rule.RuleContext} context
+	 */
+	create(context) {
+		const filename = context.filename.split(sep).pop();
+		if (filename !== 'page.tsx') return {};
+
+		return {
+			ExportDefaultDeclaration(node) {
+				if (node.declaration.type === 'FunctionDeclaration' || (node.declaration.type === 'ArrowFunctionExpression' && node.declaration.id)) {
+					/**
+					 * @type {string | undefined}
+					 */
+					const functionName = node.declaration.id && node.declaration.id.name;
+
+					if (functionName && !functionName.endsWith('Page')) {
+						context.report({
+							node,
+							messageId: 'invalidExportName',
+							fix(fixed) {
+								const newName = `${functionName}Page`;
+								const start = node.declaration.id.range[0];
+								const end = node.declaration.id.range[1];
+								return fixed.replaceTextRange([start, end], newName);
+							},
+						});
+					}
+				}
+
+				if (node.declaration.type === 'Identifier') {
+					context.report({
+						node,
+						messageId: 'invalidExportType',
+					});
+				}
+			},
+		};
+
+	},
+};
diff --git a/package-lock.json b/package-lock.json
index 9459728b..4ba8d3c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "faithful-mods",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "faithful-mods",
-			"version": "1.0.9",
+			"version": "1.0.10",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@auth/prisma-adapter": "^2.4.2",
@@ -25,7 +25,7 @@
 				"class-variance-authority": "^0.7.0",
 				"clsx": "^2.0.0",
 				"jszip": "^3.10.1",
-				"next": "^14.2.5",
+				"next": "^14.2.6",
 				"next-auth": "5.0.0-beta.18",
 				"next-themes": "^0.3.0",
 				"react": "^18",
@@ -33,9 +33,11 @@
 				"react-dom": "^18",
 				"react-hook-form": "^7.52.2",
 				"react-icons": "^5.3.0",
+				"react-minecraft": "^1.1.0",
 				"react-spinners": "^0.14.1",
 				"sass": "^1.77.8",
 				"server-only": "^0.0.1",
+				"simple-git": "^3.25.0",
 				"socket.io": "^4.7.5",
 				"socket.io-client": "^4.7.5",
 				"tailwind-merge": "^2.5.2",
@@ -53,7 +55,8 @@
 				"autoprefixer": "^10.4.20",
 				"cross-env": "^7.0.3",
 				"eslint": "^8.57.0",
-				"eslint-config-next": "^14.2.5",
+				"eslint-config-next": "^14.2.6",
+				"eslint-plugin-custom-rules": "file:eslint-plugins",
 				"eslint-plugin-unused-imports": "^4.1.3",
 				"postcss": "^8.4.39",
 				"postcss-preset-mantine": "^1.17.0",
@@ -68,6 +71,12 @@
 				"typescript": "^5.5.4"
 			}
 		},
+		"eslint-plugins": {
+			"name": "eslint-plugin-custom-rules",
+			"version": "1.0.0",
+			"dev": true,
+			"license": "ISC"
+		},
 		"node_modules/@aashutoshrathi/word-wrap": {
 			"version": "1.2.6",
 			"resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -995,6 +1004,21 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@kwsites/file-exists": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@kwsites/file-exists/-/file-exists-1.1.1.tgz",
+			"integrity": "sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==",
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.1.1"
+			}
+		},
+		"node_modules/@kwsites/promise-deferred": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@kwsites/promise-deferred/-/promise-deferred-1.1.1.tgz",
+			"integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
+			"license": "MIT"
+		},
 		"node_modules/@ltd/j-toml": {
 			"version": "1.38.0",
 			"resolved": "https://registry.npmjs.org/@ltd/j-toml/-/j-toml-1.38.0.tgz",
@@ -1124,15 +1148,15 @@
 			}
 		},
 		"node_modules/@next/env": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
-			"integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.6.tgz",
+			"integrity": "sha512-bs5DFKV+08EjWrl8EB+KKqev1ZTNONH1vFCaHh911aaB362NnP32UDTbE9VQhyiAgbFqJsfDkSxFERNDDb3j0g==",
 			"license": "MIT"
 		},
 		"node_modules/@next/eslint-plugin-next": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.5.tgz",
-			"integrity": "sha512-LY3btOpPh+OTIpviNojDpUdIbHW9j0JBYBjsIp8IxtDFfYFyORvw3yNq6N231FVqQA7n7lwaf7xHbVJlA1ED7g==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.6.tgz",
+			"integrity": "sha512-d3+p4AjIYmhqzYHhhmkRYYN6ZU35TwZAKX08xKRfnHkz72KhWL2kxMFsDptpZs5e8bBGdepn7vn1+9DaF8iX+A==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1140,9 +1164,9 @@
 			}
 		},
 		"node_modules/@next/swc-darwin-arm64": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
-			"integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.6.tgz",
+			"integrity": "sha512-BtJZb+hYXGaVJJivpnDoi3JFVn80SHKCiiRUW3kk1SY6UCUy5dWFFSbh+tGi5lHAughzeduMyxbLt3pspvXNSg==",
 			"cpu": [
 				"arm64"
 			],
@@ -1156,9 +1180,9 @@
 			}
 		},
 		"node_modules/@next/swc-darwin-x64": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
-			"integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.6.tgz",
+			"integrity": "sha512-ZHRbGpH6KHarzm6qEeXKSElSXh8dS2DtDPjQt3IMwY8QVk7GbdDYjvV4NgSnDA9huGpGgnyy3tH8i5yHCqVkiQ==",
 			"cpu": [
 				"x64"
 			],
@@ -1172,9 +1196,9 @@
 			}
 		},
 		"node_modules/@next/swc-linux-arm64-gnu": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
-			"integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.6.tgz",
+			"integrity": "sha512-O4HqUEe3ZvKshXHcDUXn1OybN4cSZg7ZdwHJMGCXSUEVUqGTJVsOh17smqilIjooP/sIJksgl+1kcf2IWMZWHg==",
 			"cpu": [
 				"arm64"
 			],
@@ -1188,9 +1212,9 @@
 			}
 		},
 		"node_modules/@next/swc-linux-arm64-musl": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
-			"integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.6.tgz",
+			"integrity": "sha512-xUcdhr2hfalG8RDDGSFxQ75yOG894UlmFS4K2M0jLrUhauRBGOtUOxoDVwiIIuZQwZ3Y5hDsazNjdYGB0cQ9yQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -1204,9 +1228,9 @@
 			}
 		},
 		"node_modules/@next/swc-linux-x64-gnu": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
-			"integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.6.tgz",
+			"integrity": "sha512-InosKxw8UMcA/wEib5n2QttwHSKHZHNSbGcMepBM0CTcNwpxWzX32KETmwbhKod3zrS8n1vJ+DuJKbL9ZAB0Ag==",
 			"cpu": [
 				"x64"
 			],
@@ -1220,9 +1244,9 @@
 			}
 		},
 		"node_modules/@next/swc-linux-x64-musl": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
-			"integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.6.tgz",
+			"integrity": "sha512-d4QXfJmt5pGJ7cG8qwxKSBnO5AXuKAFYxV7qyDRHnUNvY/dgDh+oX292gATpB2AAHgjdHd5ks1wXxIEj6muLUQ==",
 			"cpu": [
 				"x64"
 			],
@@ -1236,9 +1260,9 @@
 			}
 		},
 		"node_modules/@next/swc-win32-arm64-msvc": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
-			"integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.6.tgz",
+			"integrity": "sha512-AlgIhk4/G+PzOG1qdF1b05uKTMsuRatFlFzAi5G8RZ9h67CVSSuZSbqGHbJDlcV1tZPxq/d4G0q6qcHDKWf4aQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -1252,9 +1276,9 @@
 			}
 		},
 		"node_modules/@next/swc-win32-ia32-msvc": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
-			"integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.6.tgz",
+			"integrity": "sha512-hNukAxq7hu4o5/UjPp5jqoBEtrpCbOmnUqZSKNJG8GrUVzfq0ucdhQFVrHcLRMvQcwqqDh1a5AJN9ORnNDpgBQ==",
 			"cpu": [
 				"ia32"
 			],
@@ -1268,9 +1292,9 @@
 			}
 		},
 		"node_modules/@next/swc-win32-x64-msvc": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
-			"integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.6.tgz",
+			"integrity": "sha512-NANtw+ead1rSDK1jxmzq3TYkl03UNK2KHqUYf1nIhNci6NkeqBD4s1njSzYGIlSHxCK+wSaL8RXZm4v+NF/pMw==",
 			"cpu": [
 				"x64"
 			],
@@ -3120,13 +3144,13 @@
 			}
 		},
 		"node_modules/eslint-config-next": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.5.tgz",
-			"integrity": "sha512-zogs9zlOiZ7ka+wgUnmcM0KBEDjo4Jis7kxN1jvC0N4wynQ2MIx/KBkg4mVF63J5EK4W0QMCn7xO3vNisjaAoA==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.6.tgz",
+			"integrity": "sha512-z0URA5LO6y8lS/YLN0EDW/C4LEkDODjJzA37dvLVdzCPzuewjzTe1os5g3XclZAZrQ8X8hPaSMQ2JuVWwMmrTA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@next/eslint-plugin-next": "14.2.5",
+				"@next/eslint-plugin-next": "14.2.6",
 				"@rushstack/eslint-patch": "^1.3.3",
 				"@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0",
 				"eslint-import-resolver-node": "^0.3.6",
@@ -3385,6 +3409,10 @@
 				"ms": "^2.1.1"
 			}
 		},
+		"node_modules/eslint-plugin-custom-rules": {
+			"resolved": "eslint-plugins",
+			"link": true
+		},
 		"node_modules/eslint-plugin-unused-imports": {
 			"version": "4.1.3",
 			"resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.1.3.tgz",
@@ -4865,9 +4893,9 @@
 			}
 		},
 		"node_modules/micromatch": {
-			"version": "4.0.7",
-			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-			"integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+			"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
 			"license": "MIT",
 			"dependencies": {
 				"braces": "^3.0.3",
@@ -4975,12 +5003,12 @@
 			}
 		},
 		"node_modules/next": {
-			"version": "14.2.5",
-			"resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
-			"integrity": "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==",
+			"version": "14.2.6",
+			"resolved": "https://registry.npmjs.org/next/-/next-14.2.6.tgz",
+			"integrity": "sha512-57Su7RqXs5CBKKKOagt8gPhMM3CpjgbeQhrtei2KLAA1vTNm7jfKS+uDARkSW8ZETUflDCBIsUKGSyQdRs4U4g==",
 			"license": "MIT",
 			"dependencies": {
-				"@next/env": "14.2.5",
+				"@next/env": "14.2.6",
 				"@swc/helpers": "0.5.5",
 				"busboy": "1.6.0",
 				"caniuse-lite": "^1.0.30001579",
@@ -4995,15 +5023,15 @@
 				"node": ">=18.17.0"
 			},
 			"optionalDependencies": {
-				"@next/swc-darwin-arm64": "14.2.5",
-				"@next/swc-darwin-x64": "14.2.5",
-				"@next/swc-linux-arm64-gnu": "14.2.5",
-				"@next/swc-linux-arm64-musl": "14.2.5",
-				"@next/swc-linux-x64-gnu": "14.2.5",
-				"@next/swc-linux-x64-musl": "14.2.5",
-				"@next/swc-win32-arm64-msvc": "14.2.5",
-				"@next/swc-win32-ia32-msvc": "14.2.5",
-				"@next/swc-win32-x64-msvc": "14.2.5"
+				"@next/swc-darwin-arm64": "14.2.6",
+				"@next/swc-darwin-x64": "14.2.6",
+				"@next/swc-linux-arm64-gnu": "14.2.6",
+				"@next/swc-linux-arm64-musl": "14.2.6",
+				"@next/swc-linux-x64-gnu": "14.2.6",
+				"@next/swc-linux-x64-musl": "14.2.6",
+				"@next/swc-win32-arm64-msvc": "14.2.6",
+				"@next/swc-win32-ia32-msvc": "14.2.6",
+				"@next/swc-win32-x64-msvc": "14.2.6"
 			},
 			"peerDependencies": {
 				"@opentelemetry/api": "^1.1.0",
@@ -5904,6 +5932,18 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 			"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 		},
+		"node_modules/react-minecraft": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/react-minecraft/-/react-minecraft-1.1.0.tgz",
+			"integrity": "sha512-wJkKuxumahvEP8IOoQoZArIPMZmqbPPqW90yd47EdzjheGOersmCh5MoyqFb1ZFLjuG5tmZT599Amc2WVcx0DA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18.0.0"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17 || ^18 || ^19"
+			}
+		},
 		"node_modules/react-number-format": {
 			"version": "5.3.4",
 			"resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.4.tgz",
@@ -6401,6 +6441,21 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/simple-git": {
+			"version": "3.25.0",
+			"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.25.0.tgz",
+			"integrity": "sha512-KIY5sBnzc4yEcJXW7Tdv4viEz8KyG+nU0hay+DWZasvdFOYKeUZ6Xc25LUHHjw0tinPT7O1eY6pzX7pRT1K8rw==",
+			"license": "MIT",
+			"dependencies": {
+				"@kwsites/file-exists": "^1.1.1",
+				"@kwsites/promise-deferred": "^1.1.1",
+				"debug": "^4.3.5"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/steveukx/git-js?sponsor=1"
+			}
+		},
 		"node_modules/slash": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index b55d519d..3957d3a7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "faithful-mods",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"private": true,
 	"scripts": {
 		"dev": "npx cross-env NODE_ENV=development tsx watch src/server.ts",
@@ -28,7 +28,7 @@
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
 		"jszip": "^3.10.1",
-		"next": "^14.2.5",
+		"next": "^14.2.6",
 		"next-auth": "5.0.0-beta.18",
 		"next-themes": "^0.3.0",
 		"react": "^18",
@@ -36,9 +36,11 @@
 		"react-dom": "^18",
 		"react-hook-form": "^7.52.2",
 		"react-icons": "^5.3.0",
+		"react-minecraft": "^1.1.0",
 		"react-spinners": "^0.14.1",
 		"sass": "^1.77.8",
 		"server-only": "^0.0.1",
+		"simple-git": "^3.25.0",
 		"socket.io": "^4.7.5",
 		"socket.io-client": "^4.7.5",
 		"tailwind-merge": "^2.5.2",
@@ -56,7 +58,8 @@
 		"autoprefixer": "^10.4.20",
 		"cross-env": "^7.0.3",
 		"eslint": "^8.57.0",
-		"eslint-config-next": "^14.2.5",
+		"eslint-config-next": "^14.2.6",
+		"eslint-plugin-custom-rules": "file:eslint-plugins",
 		"eslint-plugin-unused-imports": "^4.1.3",
 		"postcss": "^8.4.39",
 		"postcss-preset-mantine": "^1.17.0",
diff --git a/public/gh_desktop.png b/public/gh_desktop.png
new file mode 100644
index 00000000..6d4ef564
Binary files /dev/null and b/public/gh_desktop.png differ
diff --git a/src/app/(pages)/(protected)/contribute/page.tsx b/src/app/(pages)/(protected)/contribute/page.tsx
index 814a142f..20613856 100644
--- a/src/app/(pages)/(protected)/contribute/page.tsx
+++ b/src/app/(pages)/(protected)/contribute/page.tsx
@@ -9,22 +9,21 @@ import { IoReload } from 'react-icons/io5';
 import { LuArrowUpDown } from 'react-icons/lu';
 
 import { ActionIcon, Badge, Button, FloatingIndicator, Group, Indicator, Kbd, List, Select, Stack, Text } from '@mantine/core';
-import { useHotkeys, useOs, usePrevious } from '@mantine/hooks';
+import { useHotkeys, useOs, usePrevious, useViewportSize } from '@mantine/hooks';
 import { Resolution, Status } from '@prisma/client';
 
+import { SmallTile } from '~/components/base/small-tile';
+import { Tile } from '~/components/base/tile';
 import ForkInfo from '~/components/fork';
-import { SmallTile } from '~/components/small-tile';
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useCurrentUser } from '~/hooks/use-current-user';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, COLORS, gitBlobUrl, gitCommitUrl, GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
-import { getContributionsOfFork } from '~/server/actions/git';
+import { getContributionsOfFork } from '~/server/actions/octokit';
 import { archiveContributions, createContributionsFromGitFiles, deleteContributions, deleteContributionsOrArchive, getContributionsOfUser, submitContributions } from '~/server/data/contributions';
 import { getTextures } from '~/server/data/texture';
 
-import type { GitFile } from '~/server/actions/git';
+import type { GitFile } from '~/server/actions/octokit';
 import type { GetContributionsOfUser } from '~/server/data/contributions';
 import type { GetTextures } from '~/server/data/texture';
 
@@ -49,7 +48,7 @@ export default function ContributeSubmissionsPage() {
 	const [groupRef, setGroupRef] = useState<HTMLDivElement | null>(null);
 	const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});
 	const [activeTab, setActiveTab] = useState(0);
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	useHotkeys([
 		[
@@ -146,7 +145,7 @@ export default function ContributeSubmissionsPage() {
 				rightSection={contributions.filter((c) => c.status === Object.keys(Status)[index]).length ?? 0}
 				justify="space-between"
 				className="slider-button"
-				style={windowWidth > BREAKPOINT_MOBILE_LARGE
+				style={width > BREAKPOINT_MOBILE_LARGE
 					? {
 						borderRight: !isLast && activeTab !== index + 1 && activeTab !== index
 							? 'calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border)'
@@ -203,7 +202,7 @@ export default function ContributeSubmissionsPage() {
 					style={{
 						position: 'relative',
 					}}
-					orientation={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'vertical' : 'horizontal'}
+					orientation={width <= BREAKPOINT_MOBILE_LARGE ? 'vertical' : 'horizontal'}
 				>
 					{controls}
 					<FloatingIndicator
diff --git a/src/app/(pages)/(protected)/council/layout.tsx b/src/app/(pages)/(protected)/council/layout.tsx
index f275a7c1..e5304344 100644
--- a/src/app/(pages)/(protected)/council/layout.tsx
+++ b/src/app/(pages)/(protected)/council/layout.tsx
@@ -2,14 +2,14 @@
 
 import { UserRole } from '@prisma/client';
 
-import { RoleGate } from '~/components/role-gate';
-import { TabsLayout } from '~/components/tabs';
+import { RoleGate } from '~/components/base/role-gate';
+import { TabsLayout } from '~/components/base/tabs-layout';
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;
 };
 
-const CouncilPage = ({ children }: ProtectedLayoutProps) => {
+export default function CouncilLayout({ children }: ProtectedLayoutProps) {
 	const tabs = [
 		{ value: 'submissions', label: 'Submissions' },
 		{ value: 'modpacks', label: 'Modpacks' },
@@ -28,5 +28,3 @@ const CouncilPage = ({ children }: ProtectedLayoutProps) => {
 		</RoleGate>
 	);
 };
-
-export default CouncilPage;
diff --git a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-general.tsx b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-general.tsx
index 0efc49cc..c664a8e6 100644
--- a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-general.tsx
+++ b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-general.tsx
@@ -1,8 +1,8 @@
 
 import { Group, FileInput, TextInput, Badge, Stack, Text } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { TextureImage } from '~/components/textures/texture-img';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
 import type { ModpackModalFormValues } from './modpack-modal';
@@ -11,8 +11,8 @@ import type { UseFormReturnType } from '@mantine/form';
 import type { Modpack } from '@prisma/client';
 
 export function ModpackModalGeneral({ previewImg, modpack, form }: { form: UseFormReturnType<ModpackModalFormValues>, previewImg: string, modpack: Modpack | undefined }) {
-	const [windowWidth] = useDeviceSize();
-	const imageWidth = windowWidth <= BREAKPOINT_MOBILE_LARGE ? windowWidth * 0.7 : 220;
+	const { width } = useViewportSize();
+	const imageWidth = width <= BREAKPOINT_MOBILE_LARGE ? width * 0.7 : 220;
 
 	const filename: FileInputProps['valueComponent'] = ({ value }) => {
 		if (value === null) return <Text size="sm" c="dimmed">None</Text>;
@@ -39,7 +39,7 @@ export function ModpackModalGeneral({ previewImg, modpack, form }: { form: UseFo
 				}
 			</Stack>
 
-			<Stack w={windowWidth > BREAKPOINT_MOBILE_LARGE ? `calc(100% - ${imageWidth}px - var(--mantine-spacing-md))` : '100%'} gap="sm">
+			<Stack w={width > BREAKPOINT_MOBILE_LARGE ? `calc(100% - ${imageWidth}px - var(--mantine-spacing-md))` : '100%'} gap="sm">
 				<TextInput label="Name" required {...form.getInputProps('name')} />
 				<TextInput label="Description" placeholder="Give this modpack a nice description" {...form.getInputProps('description')} />
 				<TextInput label="Authors" description="Use a comma to separate multiple authors" required {...form.getInputProps('authors')} />
diff --git a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-modal.tsx b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-modal.tsx
index f6f14e2d..759a32b0 100644
--- a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-modal.tsx
+++ b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-modal.tsx
@@ -3,8 +3,8 @@ import { useState, useTransition } from 'react';
 
 import { Group, Button, Tabs } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT, GRADIENT_DANGER, MAX_NAME_LENGTH, MIN_NAME_LENGTH } from '~/lib/constants';
 import { notify } from '~/lib/utils';
@@ -26,7 +26,7 @@ export interface ModpackModalFormValues {
 export function ModpackModal({ modpack, onClose }: { modpack?: Modpack | undefined, onClose: (editedModpack: Modpack | string) => void }) {
 	const [isPending, startTransition] = useTransition();
 	const [previewImg, setPreviewImg] = useState<string>(modpack?.image ?? '');
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const form = useForm<ModpackModalFormValues>({
 		initialValues: {
@@ -121,7 +121,7 @@ export function ModpackModal({ modpack, onClose }: { modpack?: Modpack | undefin
 						onClick={() => onDelete(modpack.id)}
 						disabled={isPending}
 						loading={isPending}
-						fullWidth={windowWidth <= BREAKPOINT_MOBILE_LARGE}
+						fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
 					>
 						Delete Modpack
 					</Button>
@@ -132,7 +132,7 @@ export function ModpackModal({ modpack, onClose }: { modpack?: Modpack | undefin
 					onClick={() => onSubmit(form.values)}
 					disabled={isPending || !form.isValid()}
 					loading={isPending}
-					fullWidth={windowWidth <= BREAKPOINT_MOBILE_LARGE}
+					fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
 				>
 					{modpack ? 'Update' : 'Create'} Modpack
 				</Button>
diff --git a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version-modal.tsx b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version-modal.tsx
index d7c23d09..958e95f2 100644
--- a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version-modal.tsx
+++ b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version-modal.tsx
@@ -5,10 +5,10 @@ import { useEffect, useState, useTransition } from 'react';
 import { Button, Code, Group, Progress, Stack, Text, TextInput } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useForm } from '@mantine/form';
+import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useCurrentUser } from '~/hooks/use-current-user';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { useWebsocket } from '~/hooks/use-websocket';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
@@ -29,7 +29,7 @@ export function ModpackVersionModal({ modpack, modpackVersion, onClose }: { modp
 	const [search, setSearch] = useState<string>('');
 	const [displayedMods, setDisplayedMods] = useState<Mod[]>([]);
 
-	const [windowWidth, windowHeight] = useDeviceSize();
+	const { width, height } = useViewportSize();
 
 	const [status, setStatus] = useState<SocketModUpload | null>(null);
 	const socketId = modpack.id + '-' + useCurrentUser()!.id!;
@@ -129,7 +129,7 @@ export function ModpackVersionModal({ modpack, modpackVersion, onClose }: { modp
 	};
 
 	return (
-		<Stack gap="md" style={{ maxHeight: `calc(${windowHeight - 60}px - var(--mantine-spacing-md))` }}>
+		<Stack gap="md" style={{ maxHeight: `calc(${height - 60}px - var(--mantine-spacing-md))` }}>
 			<TextInput label="Version" placeholder="1.2.4" required {...form.getInputProps('version')} />
 			<Stack justify="start" gap="0">
 				<Text mb={5} size="var(--input-label-size, var(--mantine-font-size-sm))" fw={500}>Add mods</Text>
@@ -190,13 +190,13 @@ export function ModpackVersionModal({ modpack, modpackVersion, onClose }: { modp
 						<Text mb={5} size="var(--input-label-size, var(--mantine-font-size-sm))" fw={500}>Current mods</Text>
 						<TextInput placeholder="Search mods" onChange={(e) => setSearch(e.currentTarget.value)} />
 					</Stack>
-					<Stack gap="sm" style={{ maxHeight: windowWidth <= BREAKPOINT_MOBILE_LARGE ? '100%' : '400px', overflowY: modVersions.length > 5 ? 'auto' : 'hidden' }}>
+					<Stack gap="sm" style={{ maxHeight: width <= BREAKPOINT_MOBILE_LARGE ? '100%' : '400px', overflowY: modVersions.length > 5 ? 'auto' : 'hidden' }}>
 						{displayedMods.map((mod, index) =>
 							<Group key={index} justify="space-between">
 								<Group gap="xs">
 									<TextureImage src={mod.image ?? './icon.png'} alt={mod.name} size={36} />
 									<Stack gap="0">
-										<Text size="sm" maw={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 230 : ''} truncate="end">{mod.name}</Text>
+										<Text size="sm" maw={width <= BREAKPOINT_MOBILE_LARGE ? 230 : ''} truncate="end">{mod.name}</Text>
 										<Text size="xs" c="dimmed">{modVersions.find((v) => v.modId === mod.id)?.version}</Text>
 									</Stack>
 								</Group>
diff --git a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version.tsx b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version.tsx
index 12083f34..5308d6ec 100644
--- a/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version.tsx
+++ b/src/app/(pages)/(protected)/council/modpacks/modal/modpack-versions/modpack-version.tsx
@@ -3,10 +3,9 @@
 import { useState } from 'react';
 
 import { Button, Group, Table, Text } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useViewportSize } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { Modal } from '~/components/base/modal';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 import { notify } from '~/lib/utils';
@@ -22,7 +21,7 @@ export function ModpackVersions({ modpack }: { modpack: Modpack }) {
 	const [modalModpackVersion, setModalModpackVersion] = useState<ModpackVersionWithMods | undefined>();
 	const [modpackVersions, setModpackVersions] = useState<ModpackVersionWithMods[]>([]);
 
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	useEffectOnce(() => {
 		getModpackVersions(modpack.id)
@@ -61,7 +60,7 @@ export function ModpackVersions({ modpack }: { modpack: Modpack }) {
 						<Table.Thead>
 							<Table.Tr>
 								<Table.Th>Version</Table.Th>
-								{windowWidth > BREAKPOINT_MOBILE_LARGE && <Table.Th>Number of mods</Table.Th>}
+								{width > BREAKPOINT_MOBILE_LARGE && <Table.Th>Number of mods</Table.Th>}
 								<Table.Th>Created</Table.Th>
 								<Table.Th>Updated</Table.Th>
 							</Table.Tr>
@@ -70,7 +69,7 @@ export function ModpackVersions({ modpack }: { modpack: Modpack }) {
 							{modpackVersions.map((version) => (
 								<Table.Tr key={version.id} onClick={() => openModpackVersionModal(version)} className="cursor-pointer">
 									<Table.Td>{version.version}</Table.Td>
-									{windowWidth > BREAKPOINT_MOBILE_LARGE && <Table.Td>{version.mods.length}</Table.Td>}
+									{width > BREAKPOINT_MOBILE_LARGE && <Table.Td>{version.mods.length}</Table.Td>}
 									<Table.Td>{version.createdAt.toLocaleString()}</Table.Td>
 									<Table.Td>{version.updatedAt.toLocaleString()}</Table.Td>
 								</Table.Tr>
diff --git a/src/app/(pages)/(protected)/council/modpacks/page.tsx b/src/app/(pages)/(protected)/council/modpacks/page.tsx
index 67538649..1ec05fd6 100644
--- a/src/app/(pages)/(protected)/council/modpacks/page.tsx
+++ b/src/app/(pages)/(protected)/council/modpacks/page.tsx
@@ -3,14 +3,13 @@
 import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import { Badge, Group, Text, TextInput, Button, Select, Pagination, Stack } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, usePrevious } from '@mantine/hooks';
 import { UserRole } from '@prisma/client';
 
+import { Modal } from '~/components/base/modal';
 import { DashboardItem } from '~/components/dashboard-item/dashboard-item';
-import { Modal } from '~/components/modal';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
-import { usePrevious } from '~/hooks/use-previous';
 import { GRADIENT, GRADIENT_DANGER, ITEMS_PER_PAGE, ITEMS_PER_PAGE_DEFAULT } from '~/lib/constants';
 import { notify, searchFilter, sortByName } from '~/lib/utils';
 import { getModpacks, voidModpacks } from '~/server/data/modpacks';
@@ -19,7 +18,7 @@ import { ModpackModal } from './modal/modpack-modal';
 
 import type { Modpack } from '@prisma/client';
 
-const ModpacksPanel = () => {
+export default function ModpacksPage() {
 	const user = useCurrentUser()!;
 	const itemsPerPage = useMemo(() => ITEMS_PER_PAGE, []);
 
@@ -213,5 +212,3 @@ const ModpacksPanel = () => {
 		</>
 	);
 };
-
-export default ModpacksPanel;
diff --git a/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version-modal.tsx b/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version-modal.tsx
index 4016dc2f..db2baf30 100644
--- a/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version-modal.tsx
+++ b/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version-modal.tsx
@@ -5,7 +5,7 @@ import { useState, useTransition } from 'react';
 import { Button, Group, Stack, Text, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { extractSemver } from '~/lib/utils';
diff --git a/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version.tsx b/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version.tsx
index f3f0e78c..a6f9e09b 100644
--- a/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version.tsx
+++ b/src/app/(pages)/(protected)/council/mods/modal/mod-versions/mod-version.tsx
@@ -3,12 +3,11 @@
 import { useState } from 'react';
 
 import { Group, Table, Text } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useViewportSize } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
+import { Modal } from '~/components/base/modal';
 import { ModUpload } from '~/components/mods-upload';
 import { WarningIcon } from '~/components/warning-icon';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET } from '~/lib/constants';
 import { extractSemver, notify } from '~/lib/utils';
@@ -24,7 +23,7 @@ export function ModVersions({ mod }: { mod: Mod }) {
 	const [modVersions, setModVersions] = useState<ModVersionExtended[]>([]);
 	const [modalModVersion, setModalModVersion] = useState<ModVersionExtended | undefined>();
 
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	useEffectOnce(() => {
 		getModVersionsWithModpacks(mod.id)
@@ -78,8 +77,8 @@ export function ModVersions({ mod }: { mod: Mod }) {
 							<Table.Tr>
 								<Table.Th>Version</Table.Th>
 								<Table.Th>Minecraft</Table.Th>
-								{windowWidth > BREAKPOINT_MOBILE_LARGE && <Table.Th>Modpacks</Table.Th>}
-								{windowWidth > BREAKPOINT_MOBILE_LARGE && <Table.Th>Textures</Table.Th>}
+								{width > BREAKPOINT_MOBILE_LARGE && <Table.Th>Modpacks</Table.Th>}
+								{width > BREAKPOINT_MOBILE_LARGE && <Table.Th>Textures</Table.Th>}
 								<Table.Th>Created</Table.Th>
 								<Table.Th>Updated</Table.Th>
 							</Table.Tr>
@@ -100,10 +99,10 @@ export function ModVersions({ mod }: { mod: Mod }) {
 											/>
 										)}
 									</Table.Td>
-									{windowWidth > BREAKPOINT_MOBILE_LARGE && <Table.Td>{version.modpacks.length}</Table.Td>}
-									{windowWidth > BREAKPOINT_MOBILE_LARGE && <Table.Td>linked: {version.linked}, unique: {version.textures}</Table.Td>}
-									<Table.Td>{windowWidth > BREAKPOINT_TABLET ? version.createdAt.toLocaleString() : version.createdAt.toLocaleDateString()}</Table.Td>
-									<Table.Td>{windowWidth > BREAKPOINT_TABLET ? version.updatedAt.toLocaleString() : version.updatedAt.toLocaleDateString()}</Table.Td>
+									{width > BREAKPOINT_MOBILE_LARGE && <Table.Td>{version.modpacks.length}</Table.Td>}
+									{width > BREAKPOINT_MOBILE_LARGE && <Table.Td>linked: {version.linked}, unique: {version.textures}</Table.Td>}
+									<Table.Td>{width > BREAKPOINT_TABLET ? version.createdAt.toLocaleString() : version.createdAt.toLocaleDateString()}</Table.Td>
+									<Table.Td>{width > BREAKPOINT_TABLET ? version.updatedAt.toLocaleString() : version.updatedAt.toLocaleDateString()}</Table.Td>
 								</Table.Tr>
 							))}
 						</Table.Tbody>
diff --git a/src/app/(pages)/(protected)/council/mods/modal/mods-general.tsx b/src/app/(pages)/(protected)/council/mods/modal/mods-general.tsx
index b2576f1e..b1506b1f 100644
--- a/src/app/(pages)/(protected)/council/mods/modal/mods-general.tsx
+++ b/src/app/(pages)/(protected)/council/mods/modal/mods-general.tsx
@@ -1,8 +1,8 @@
 
 import { Badge, FileInput, Group, MultiSelect, Stack, TextInput, Text } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { TextureImage } from '~/components/textures/texture-img';
 import { BREAKPOINT_MOBILE_LARGE, MODS_LOADERS } from '~/lib/constants';
 
 import type { ModModalFormValues } from './mods-modal';
@@ -17,8 +17,8 @@ export interface ModModalGeneralProps {
 }
 
 export function ModModalGeneral({ previewImg, mod, form }: ModModalGeneralProps) {
-	const [windowWidth] = useDeviceSize();
-	const imageWidth = windowWidth <= BREAKPOINT_MOBILE_LARGE ? windowWidth * 0.7 : 220;
+	const { width } = useViewportSize();
+	const imageWidth = width <= BREAKPOINT_MOBILE_LARGE ? width * 0.7 : 220;
 
 	const filename: FileInputProps['valueComponent'] = ({ value }) => {
 		if (value === null) return <Text size="sm" c="dimmed">None</Text>;
@@ -45,7 +45,7 @@ export function ModModalGeneral({ previewImg, mod, form }: ModModalGeneralProps)
 				}
 			</Stack>
 
-			<Stack w={windowWidth > BREAKPOINT_MOBILE_LARGE ? `calc(100% - ${imageWidth}px - var(--mantine-spacing-md))` : '100%'} gap="sm">
+			<Stack w={width > BREAKPOINT_MOBILE_LARGE ? `calc(100% - ${imageWidth}px - var(--mantine-spacing-md))` : '100%'} gap="sm">
 				<TextInput label="Name" required {...form.getInputProps('name')} />
 				<TextInput label="Description" {...form.getInputProps('description')} />
 				<TextInput label="Author(s)" required description="Use a comma to separate multiple authors" {...form.getInputProps('authors')} />
diff --git a/src/app/(pages)/(protected)/council/mods/modal/mods-modal.tsx b/src/app/(pages)/(protected)/council/mods/modal/mods-modal.tsx
index 6d81b370..0e2b0433 100644
--- a/src/app/(pages)/(protected)/council/mods/modal/mods-modal.tsx
+++ b/src/app/(pages)/(protected)/council/mods/modal/mods-modal.tsx
@@ -2,8 +2,8 @@ import { useState, useTransition } from 'react';
 
 import { Button, Group, Tabs } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_DESKTOP_LARGE, GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { notify } from '~/lib/utils';
@@ -28,7 +28,7 @@ export interface ModModalFormValues {
 export function ModModal({ mod, onClose }: {mod: Mod, onClose: (editedMod: Mod | string) => void }) {
 	const [isPending, startTransition] = useTransition();
 	const [previewImg, setPreviewImg] = useState<string>(mod?.image || '');
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const form = useForm<ModModalFormValues>({
 		initialValues: {
@@ -127,7 +127,7 @@ export function ModModal({ mod, onClose }: {mod: Mod, onClose: (editedMod: Mod |
 					onClick={() => onDelete(mod.id)}
 					disabled={isPending}
 					loading={isPending}
-					fullWidth={windowWidth <= BREAKPOINT_DESKTOP_LARGE}
+					fullWidth={width <= BREAKPOINT_DESKTOP_LARGE}
 				>
 					Delete Mod
 				</Button>
@@ -137,7 +137,7 @@ export function ModModal({ mod, onClose }: {mod: Mod, onClose: (editedMod: Mod |
 					onClick={() => onSubmit(form.values)}
 					disabled={isPending || !form.isValid()}
 					loading={isPending}
-					fullWidth={windowWidth <= BREAKPOINT_DESKTOP_LARGE}
+					fullWidth={width <= BREAKPOINT_DESKTOP_LARGE}
 				>
 					Update Mod
 				</Button>
diff --git a/src/app/(pages)/(protected)/council/mods/page.tsx b/src/app/(pages)/(protected)/council/mods/page.tsx
index 74d5a8eb..89888fdc 100644
--- a/src/app/(pages)/(protected)/council/mods/page.tsx
+++ b/src/app/(pages)/(protected)/council/mods/page.tsx
@@ -3,16 +3,14 @@
 import { useEffect, useMemo, useState, useTransition } from 'react';
 
 import { Badge, Button, Group, Pagination, Select, Stack, Switch, Text, TextInput } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, usePrevious, useViewportSize } from '@mantine/hooks';
 import { UserRole } from '@prisma/client';
 
+import { Modal } from '~/components/base/modal';
 import { DashboardItem } from '~/components/dashboard-item/dashboard-item';
-import { Modal } from '~/components/modal';
 import { ModUpload } from '~/components/mods-upload';
 import { useCurrentUser } from '~/hooks/use-current-user';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
-import { usePrevious } from '~/hooks/use-previous';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT_DANGER, ITEMS_PER_PAGE, ITEMS_PER_PAGE_DEFAULT } from '~/lib/constants';
 import { searchFilter, sortByName } from '~/lib/utils';
 import { getMods, modHasUnknownVersion, voidMods } from '~/server/data/mods';
@@ -23,9 +21,9 @@ import type { Mod } from '@prisma/client';
 
 type ModWVer = Mod & { unknownVersion: boolean };
 
-const ModsPanel = () => {
+export default function ModsPage() {
 	const user = useCurrentUser()!;
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const [isPending, startTransition] = useTransition();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
@@ -146,7 +144,7 @@ const ModsPanel = () => {
 				<Group
 					align="center"
 					gap="sm"
-					wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
+					wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
 				>
 					<Group align="center" gap="sm" wrap="nowrap" className="w-full">
 						<Select
@@ -167,7 +165,7 @@ const ModsPanel = () => {
 
 					<Switch
 						label="Only show mods with unknown MC version"
-						mt={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 0 : 22}
+						mt={width <= BREAKPOINT_MOBILE_LARGE ? 0 : 22}
 						className="w-full"
 						checked={showUnknown}
 						onChange={(e) =>{
@@ -238,5 +236,3 @@ const ModsPanel = () => {
 		</>
 	);
 };
-
-export default ModsPanel;
diff --git a/src/app/(pages)/(protected)/council/page.tsx b/src/app/(pages)/(protected)/council/page.tsx
index 5256b52c..34c01980 100644
--- a/src/app/(pages)/(protected)/council/page.tsx
+++ b/src/app/(pages)/(protected)/council/page.tsx
@@ -2,8 +2,7 @@
 
 import { redirect } from 'next/navigation';
 
-const CouncilPage = () => {
+export default function CouncilPage() {
 	redirect('/council/submissions');
 };
 
-export default CouncilPage;
diff --git a/src/app/(pages)/(protected)/council/submissions/contribution-item.tsx b/src/app/(pages)/(protected)/council/submissions/contribution-item.tsx
index 35788fed..6c251c20 100644
--- a/src/app/(pages)/(protected)/council/submissions/contribution-item.tsx
+++ b/src/app/(pages)/(protected)/council/submissions/contribution-item.tsx
@@ -4,22 +4,23 @@ import { useMemo, useTransition } from 'react';
 import { LuArrowDown, LuArrowUp, LuArrowUpDown } from 'react-icons/lu';
 
 import { Button, Group, Stack, Text, Tooltip } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import { ReactCompareSlider } from 'react-compare-slider';
 
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useCurrentUser } from '~/hooks/use-current-user';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { BREAKPOINT_DESKTOP_MEDIUM, BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET } from '~/lib/constants';
 import { checkContributionStatus } from '~/server/data/contributions';
 import { editPollChoice } from '~/server/data/polls';
 
 import type { Texture } from '@prisma/client';
-import type { PublicUser, ContributionWithCoAuthorsAndFullPoll } from '~/types';
+import type { GetPendingContributions } from '~/server/data/contributions';
+import type { PublicUser } from '~/types';
 
 export interface CouncilContributionItemProps {
 	counselors: PublicUser[];
-	contribution: ContributionWithCoAuthorsAndFullPoll;
+	contribution: GetPendingContributions;
 	disabled: boolean;
 	isLightBackground: boolean;
 	hasBorder: boolean;
@@ -29,16 +30,16 @@ export interface CouncilContributionItemProps {
 
 export function CouncilContributionItem({ disabled, contribution, isLightBackground, hasBorder, texture, counselors, onVote }: CouncilContributionItemProps) {
 	const [, startTransition] = useTransition();
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 	const counselor = useCurrentUser()!;
 
 	const itemsPerRow = useMemo(() => {
-		if (windowWidth <= BREAKPOINT_MOBILE_LARGE) return 1;
-		if (windowWidth <= BREAKPOINT_TABLET) return 3;
-		if (windowWidth <= BREAKPOINT_DESKTOP_MEDIUM) return 4;
+		if (width <= BREAKPOINT_MOBILE_LARGE) return 1;
+		if (width <= BREAKPOINT_TABLET) return 3;
+		if (width <= BREAKPOINT_DESKTOP_MEDIUM) return 4;
 
 		return 6;
-	}, [windowWidth]);
+	}, [width]);
 
 	const switchVote = (kind: 'up' | 'down' | 'none') => {
 		if (disabled) return;
@@ -55,7 +56,7 @@ export function CouncilContributionItem({ disabled, contribution, isLightBackgro
 	return (
 		<Tile w={`calc((100% - (${itemsPerRow - 1} * var(--mantine-spacing-sm))) / ${itemsPerRow})`}>
 			<Group
-				gap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'sm' : 'md'}
+				gap={width <= BREAKPOINT_MOBILE_LARGE ? 'sm' : 'md'}
 				justify="center"
 				align="start"
 			>
diff --git a/src/app/(pages)/(protected)/council/submissions/page.tsx b/src/app/(pages)/(protected)/council/submissions/page.tsx
index 797464ab..9ba7db50 100644
--- a/src/app/(pages)/(protected)/council/submissions/page.tsx
+++ b/src/app/(pages)/(protected)/council/submissions/page.tsx
@@ -7,7 +7,7 @@ import { GoAlert, GoCheckCircle, GoCircleSlash } from 'react-icons/go';
 import { Accordion, Badge, Group, Select, Stack, Switch, Text } from '@mantine/core';
 import { Resolution, UserRole } from '@prisma/client';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { getPendingContributions } from '~/server/data/contributions';
@@ -20,7 +20,7 @@ import type { Texture } from '@prisma/client';
 import type { GetPendingContributions } from '~/server/data/contributions';
 import type { PublicUser } from '~/types';
 
-const CouncilContributionsPanel = () => {
+export default function CouncilSubmissionsPage() {
 	const [textures, setTextures] = useState<Texture[]>([]);
 
 	const [isLightBackground, setLightBackground] = useState(false);
@@ -191,5 +191,3 @@ const CouncilContributionsPanel = () => {
 		</Stack>
 	);
 };
-
-export default CouncilContributionsPanel;
diff --git a/src/app/(pages)/(protected)/council/textures/modal/texture-general.tsx b/src/app/(pages)/(protected)/council/textures/modal/texture-general.tsx
index e3ed8765..40e8639e 100644
--- a/src/app/(pages)/(protected)/council/textures/modal/texture-general.tsx
+++ b/src/app/(pages)/(protected)/council/textures/modal/texture-general.tsx
@@ -4,11 +4,11 @@ import { PiMagicWandBold } from 'react-icons/pi';
 
 import { Stack, Switch, TextInput, Text, Textarea, Button, Group, Select, ActionIcon } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useViewportSize } from '@mantine/hooks';
 import { Resolution } from '@prisma/client';
 
-import { FakeInputLabel } from '~/components/fakeInputLabel';
-import { TextureImage } from '~/components/texture-img';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { FakeInputLabel } from '~/components/base/fake-input-label';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT } from '~/lib/constants';
 import { getVanillaTextures } from '~/server/actions/faithful-pack';
@@ -29,7 +29,7 @@ export interface TextureGeneralForm {
 
 export function TextureGeneral({ texture }: TextureGeneralProps) {
 	const [loading, startTransition] = useTransition();
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const [contributionsStatus, setContributionsStatus] = useState<ContributionActivationStatus[]>([]);
 
@@ -92,7 +92,7 @@ export function TextureGeneral({ texture }: TextureGeneralProps) {
 
 	return (
 		<Stack>
-			<Group mt="md" wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'} align="start">
+			<Group mt="md" wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'} align="start">
 				<Stack w="100%">
 					<TextInput
 						w="100%"
diff --git a/src/app/(pages)/(protected)/council/textures/modal/texture-mcmeta.tsx b/src/app/(pages)/(protected)/council/textures/modal/texture-mcmeta.tsx
index af81d0a4..630cce3a 100644
--- a/src/app/(pages)/(protected)/council/textures/modal/texture-mcmeta.tsx
+++ b/src/app/(pages)/(protected)/council/textures/modal/texture-mcmeta.tsx
@@ -1,63 +1,127 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
-import { Button, Group, JsonInput, Stack } from '@mantine/core';
+import { Carousel } from '@mantine/carousel';
+import { Button, Group, JsonInput, Stack, useMantineColorScheme } from '@mantine/core';
+import { Texture as TextureComponent, useAnimation } from 'react-minecraft';
 
+import { FakeInputDescription, FakeInputLabel } from '~/components/base/fake-input-label';
 import { GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { updateMCMETA } from '~/server/data/texture';
 
 import type { Texture } from '@prisma/client';
-import type { TextureMCMETA } from '~/types';
+import type { MCMeta, TextureMCMeta } from 'react-minecraft';
 
 export interface TextureUsesProps {
 	texture: Texture;
-	onUpdate: (mcmeta: TextureMCMETA | null) => void;
+	onUpdate: (mcmeta: TextureMCMeta | null) => void;
 }
 
-export function TextureMCMETAEdition({ texture, onUpdate }: TextureUsesProps) {
-	const [mcmeta, setMCMETA] = useState<string>(texture.mcmeta ? JSON.stringify(texture.mcmeta, null, 2) : '');
+export function TextureMCMetaEdition({ texture, onUpdate }: TextureUsesProps) {
+	const [mcmeta, setMCMETA] = useState<TextureMCMeta | null>(texture.mcmeta);
+	const [mcmetaString, setMCMETAString] = useState<string>(JSON.stringify(mcmeta, null, 2));
 	const [isValid, setValid] = useState(false);
 
+	const { sprites } = useAnimation({ src: texture.filepath, mcmeta: mcmeta ?? {} });
+	const { colorScheme } = useMantineColorScheme();
+
+	// to get the tick to pause the animation for each frame
+	const timedSprites = useMemo(() => {
+		const res = sprites.reduce<Array<MCMeta.AnimationFrame & { tick: number }>>((acc, sprite) => {
+			const prevFrame = acc[acc.length - 1];
+			const tick = prevFrame ? sprite.time + prevFrame.tick : sprite.time;
+
+			acc.push({
+				...sprite,
+				tick,
+			});
+
+			return acc;
+		}, []);
+
+		return res;
+	}, [sprites]);
+
 	useEffect(() => {
 		try {
-			const parsed = JSON.parse(mcmeta);
+			const parsed = JSON.parse(mcmetaString);
 			if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) throw '';
 			if (!Object.keys(parsed).includes('animation')) throw '';
 
 			setValid(true);
+			setMCMETA(parsed);
 		} catch {
 			setValid(false);
 		}
 
-	}, [mcmeta]);
+	}, [mcmetaString]);
 
 	const handleUpdate = () => {
 		if (!isValid) return;
 
-		const parsed: TextureMCMETA = JSON.parse(mcmeta);
-		updateMCMETA(texture.id, parsed)
-			.then(() => onUpdate(parsed));
+		updateMCMETA(texture.id, mcmeta ?? undefined)
+			.then(() => onUpdate(mcmeta));
 	};
 
 	const handleDelete = () => {
-		setMCMETA('');
+		setMCMETA(null);
 		updateMCMETA(texture.id, undefined)
 			.then(() => onUpdate(null));
 	};
 
 	return (
 		<Stack mt="md">
-			<JsonInput
-				label="Texture MCMETA"
-				validationError="Invalid JSON"
-				formatOnBlur
-				autosize
-				minRows={4}
-
-				value={mcmeta}
-				onChange={setMCMETA}
-			/>
+			<Stack
+				gap="sm"
+				align="start"
+			>
+				{mcmeta && (
+					<FakeInputLabel label="Frames" style={{ width: '100%' }}>
+						<Carousel
+							slideGap="sm"
+							slideSize={200}
+							align="start"
+							withControls={false}
+							dragFree
+						>
+							{timedSprites.map((sprite, index) => (
+								<Carousel.Slide key={index}>
+									<Stack align="left" gap={5}>
+										<TextureComponent
+											src={texture.filepath}
+											size={200}
+											animation={{
+												mcmeta: { animation: mcmeta.animation! },
+												paused: sprite.tick,
+											}}
+											background={{
+												url: colorScheme === 'dark' ? '/transparent.png' : '/transparent_light.png',
+											}}
+										/>
+										<FakeInputDescription
+											style={{ paddingLeft: 5 }}
+											description={`Duration: ${sprite.time} tick`}
+										/>
+									</Stack>
+								</Carousel.Slide>
+							))}
+						</Carousel>
+					</FakeInputLabel>
+				)}
+
+				<JsonInput
+					label="MCMETA"
+					description="20 ticks = 1 second"
+					validationError="Invalid JSON"
+					formatOnBlur
+					autosize
+					w="100%"
+
+					value={mcmetaString}
+					onChange={setMCMETAString}
+				/>
+			</Stack>
 
 			<Group gap="md">
 				<Button
diff --git a/src/app/(pages)/(protected)/council/textures/modal/texture-modal.tsx b/src/app/(pages)/(protected)/council/textures/modal/texture-modal.tsx
index 5aa1d03f..368224cb 100644
--- a/src/app/(pages)/(protected)/council/textures/modal/texture-modal.tsx
+++ b/src/app/(pages)/(protected)/council/textures/modal/texture-modal.tsx
@@ -3,15 +3,15 @@ import { useState } from 'react';
 
 import { Stack, Tabs } from '@mantine/core';
 
-import { TextureImage } from '~/components/texture-img';
+import { TextureImage } from '~/components/textures/texture-img';
 
 import { TextureGeneral } from './texture-general';
-import { TextureMCMETAEdition } from './texture-mcmeta';
+import { TextureMCMetaEdition } from './texture-mcmeta';
 import { TextureRelations } from './texture-relations';
 import { TextureUses } from './texture-uses';
 
 import type{ Texture } from '@prisma/client';
-import type { TextureMCMETA } from '~/types';
+import type { TextureMCMeta } from 'react-minecraft';
 
 export interface TextureModalProps {
 	texture: Texture;
@@ -19,7 +19,7 @@ export interface TextureModalProps {
 }
 
 export function TextureModal({ texture, textures }: TextureModalProps) {
-	const [mcmeta, setMCMETA] = useState<TextureMCMETA | null>(texture.mcmeta);
+	const [mcmeta, setMCMETA] = useState<TextureMCMeta | null>(texture.mcmeta);
 
 	return (
 		<Stack>
@@ -56,7 +56,7 @@ export function TextureModal({ texture, textures }: TextureModalProps) {
 					<TextureUses texture={texture} />
 				</Tabs.Panel>
 				<Tabs.Panel value="mcmeta">
-					<TextureMCMETAEdition texture={texture} onUpdate={setMCMETA} />
+					<TextureMCMetaEdition texture={texture} onUpdate={setMCMETA} />
 				</Tabs.Panel>
 			</Tabs>
 		</Stack>
diff --git a/src/app/(pages)/(protected)/council/textures/modal/texture-relations.tsx b/src/app/(pages)/(protected)/council/textures/modal/texture-relations.tsx
index 569e9b3e..dda4b67a 100644
--- a/src/app/(pages)/(protected)/council/textures/modal/texture-relations.tsx
+++ b/src/app/(pages)/(protected)/council/textures/modal/texture-relations.tsx
@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { TbPlus } from 'react-icons/tb';
 
 import { Button, Group, MultiSelect, Stack, Text } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET, GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { sortByName } from '~/lib/utils';
@@ -24,12 +24,12 @@ export function TextureRelations({ texture, textures }: TextureRelationsProps) {
 	const [relatedTextures, setRelatedTextures] = useState<Texture[]>([]);
 	const [newRelatedTextures, setNewRelatedTexturesIds] = useState<number[]>([]);
 
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
-	const texturePerRow = windowWidth <= BREAKPOINT_MOBILE_LARGE ? 2 : windowWidth <= BREAKPOINT_TABLET ? 4 : 6;
-	const parentWidth = windowWidth <= BREAKPOINT_MOBILE_LARGE
-		? `${windowWidth}px`
-		: `calc(${windowWidth}px - (2 * var(--modal-inner-x-offset, var(--modal-x-offset))))`;
+	const texturePerRow = width <= BREAKPOINT_MOBILE_LARGE ? 2 : width <= BREAKPOINT_TABLET ? 4 : 6;
+	const parentWidth = width <= BREAKPOINT_MOBILE_LARGE
+		? `${width}px`
+		: `calc(${width}px - (2 * var(--modal-inner-x-offset, var(--modal-x-offset))))`;
 
 	// texture width = (parent width - side padding - gap) / items per row
 	const textureWidth = `calc((${parentWidth} - (2 * var(--mantine-spacing-md)) - (${texturePerRow - 1} * var(--mantine-spacing-md))) / ${texturePerRow})`;
diff --git a/src/app/(pages)/(protected)/council/textures/modal/texture-use-linked-popup.tsx b/src/app/(pages)/(protected)/council/textures/modal/texture-use-linked-popup.tsx
index 757d4b9f..6b2233b8 100644
--- a/src/app/(pages)/(protected)/council/textures/modal/texture-use-linked-popup.tsx
+++ b/src/app/(pages)/(protected)/council/textures/modal/texture-use-linked-popup.tsx
@@ -4,8 +4,8 @@ import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
 import { Group, Text, TextInput, Select, Button, Stack } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT } from '~/lib/constants';
 import { getModsOfModsPage } from '~/server/data/mods';
@@ -20,7 +20,7 @@ interface TextureUsesLinkedPopupProps {
 }
 
 export function TextureUsesLinkedPopup({ textureId, onUpdate }: TextureUsesLinkedPopupProps) {
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const [mods, setMods] = useState<(Mod & { versions: string[] })[]>([]);
 	const [modsVersions, setModsVersions] = useState<ModVersion[]>([]);
@@ -82,7 +82,7 @@ export function TextureUsesLinkedPopup({ textureId, onUpdate }: TextureUsesLinke
 				This allows you to have multiple uses of the same texture without duplicating the image file on the server.
 				This is useful for textures that are used in multiple mods or multiple versions of the same mod or even multiple times in the same mod version.
 			</Text>
-			<Group gap="sm" wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'} className="w-full" align="end">
+			<Group gap="sm" wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'} className="w-full" align="end">
 				<Select
 					description={<Text c="dimmed" size="xs">Select an existing mod or <Link href="/council/mods">create a new one</Link></Text>}
 					label="Mod"
diff --git a/src/app/(pages)/(protected)/council/textures/modal/texture-uses.tsx b/src/app/(pages)/(protected)/council/textures/modal/texture-uses.tsx
index 3356881f..6224c7bf 100644
--- a/src/app/(pages)/(protected)/council/textures/modal/texture-uses.tsx
+++ b/src/app/(pages)/(protected)/council/textures/modal/texture-uses.tsx
@@ -9,8 +9,8 @@ import { TbHttpDelete } from 'react-icons/tb';
 import { Stack, Group, Divider, Code, Image, Text, Button } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
-import { Tile } from '~/components/tile';
+import { Modal } from '~/components/base/modal';
+import { Tile } from '~/components/base/tile';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, GRADIENT_DANGER } from '~/lib/constants';
 import { extractSemver } from '~/lib/utils';
diff --git a/src/app/(pages)/(protected)/council/textures/page.tsx b/src/app/(pages)/(protected)/council/textures/page.tsx
index 0e0a78b8..5e136f66 100644
--- a/src/app/(pages)/(protected)/council/textures/page.tsx
+++ b/src/app/(pages)/(protected)/council/textures/page.tsx
@@ -3,13 +3,11 @@
 import { useEffect, useMemo, useRef, useState, useTransition } from 'react';
 
 import { Badge, Group, Loader, Pagination, Select, Stack, Text, TextInput } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useViewportSize, usePrevious } from '@mantine/hooks';
 
-import { Modal } from '~/components/modal';
-import { GalleryTexture } from '~/components/texture';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { Modal } from '~/components/base/modal';
+import { GalleryTexture } from '~/components/textures/texture-gallery';
 import { useEffectOnce } from '~/hooks/use-effect-once';
-import { usePrevious } from '~/hooks/use-previous';
 import { BREAKPOINT_MOBILE_LARGE, ITEMS_PER_PAGE, ITEMS_PER_ROW } from '~/lib/constants';
 import { notify, searchFilter, sortByName } from '~/lib/utils';
 import { getTexture, getTextures } from '~/server/data/texture';
@@ -18,9 +16,9 @@ import { TextureModal } from './modal/texture-modal';
 
 import type { Texture } from '@prisma/client';
 
-const CouncilTexturesPage = () => {
+export default function CouncilTexturesPage() {
 	const [isLoading, startTransition] = useTransition();
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 
 	const itemsPerPage = useMemo(() => ITEMS_PER_PAGE, []);
@@ -147,7 +145,7 @@ const CouncilTexturesPage = () => {
 					value={texturesShownPerPage}
 					onChange={(e) => e ? setTexturesShownPerPage(e) : null}
 					checkIconPosition="right"
-					w={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
+					w={width <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
 				/>
 				<Select
 					label="Textures per row"
@@ -155,7 +153,7 @@ const CouncilTexturesPage = () => {
 					value={texturesShownPerRow.toString()}
 					onChange={(e) => e ? setTexturesShownPerRow(parseInt(e)) : null}
 					checkIconPosition="right"
-					w={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
+					w={width <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
 				/>
 			</Group>
 
@@ -201,42 +199,10 @@ const CouncilTexturesPage = () => {
 			</Group>
 
 			{!isLoading && (
-				<Group mt="md" justify="center">
+				<Group mt="md" mb="sm" justify="center">
 					<Pagination total={texturesShown.length} value={activePage} onChange={setActivePage} />
 				</Group>
 			)}
 		</Stack>
 	);
-};
-
-export default CouncilTexturesPage;
-
-// <Group
-// 	key={t.id}
-// 	align="start"
-// 	gap="sm"
-// 	wrap="nowrap"
-// 	style={{
-// 		position: 'relative',
-// 		'--item-per-row': itemsPerRow,
-// 	}}
-// >
-// 	<TextureImage
-// 		className="cursor-pointer"
-// 		src={t.filepath ?? '/icon.png'}
-// 		alt={t.name}
-// 		mcmeta={t.mcmeta}
-// 		size={90}
-// 	/>
-// 	<Stack
-// 		gap="0"
-// 		align="flex-start"
-// 		mt="sm"
-// 		pr="sm"
-// 		style={{
-// 			overflow: 'hidden',
-// 		}}
-// 	>
-// 		<Text size="sm" fw={700}>{t.name}</Text>
-// 		<Text size="xs" lineClamp={2}>{t.aliases.join(', ')}</Text>
-// 	</Stack>
+}
diff --git a/src/app/(pages)/(protected)/dashboard/layout.tsx b/src/app/(pages)/(protected)/dashboard/layout.tsx
index 966879c6..d2295ae4 100644
--- a/src/app/(pages)/(protected)/dashboard/layout.tsx
+++ b/src/app/(pages)/(protected)/dashboard/layout.tsx
@@ -2,14 +2,14 @@
 
 import { UserRole } from '@prisma/client';
 
-import { RoleGate } from '~/components/role-gate';
-import { TabsLayout } from '~/components/tabs';
+import { RoleGate } from '~/components/base/role-gate';
+import { TabsLayout } from '~/components/base/tabs-layout';
 
-interface ProtectedLayoutProps {
+interface Props {
   children: React.ReactNode;
 };
 
-const DashboardPage = ({ children }: ProtectedLayoutProps) => {
+export default function DashboardLayout({ children }: Props) {
 	const tabs = [
 		{ value: 'users', label: 'Users' },
 	];
@@ -26,4 +26,3 @@ const DashboardPage = ({ children }: ProtectedLayoutProps) => {
 	);
 };
 
-export default DashboardPage;
diff --git a/src/app/(pages)/(protected)/dashboard/users/page.tsx b/src/app/(pages)/(protected)/dashboard/users/page.tsx
index c6e5e0a0..eaeba51d 100644
--- a/src/app/(pages)/(protected)/dashboard/users/page.tsx
+++ b/src/app/(pages)/(protected)/dashboard/users/page.tsx
@@ -10,7 +10,7 @@ import { Avatar, Badge, Button, Group, Select, Stack, Text, TextInput } from '@m
 import { useForm } from '@mantine/form';
 import { UserRole } from '@prisma/client';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 import { useCurrentUser } from '~/hooks/use-current-user';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { GRADIENT, MINIMUM_CARD_WIDTH } from '~/lib/constants';
@@ -19,7 +19,7 @@ import { getUsers, updateUserRole } from '~/server/data/user';
 
 import type { UserWithReports } from '~/types';
 
-const UsersPanel = () => {
+export default function DashboardUsersPage() {
 	const [users, setUsers] = useState<UserWithReports[] | undefined>();
 	const [filteredUsers, setFilteredUsers] = useState<UserWithReports[] | undefined>();
 	const loggedUser = useCurrentUser()!;
@@ -121,5 +121,3 @@ const UsersPanel = () => {
 		</Tile>
 	);
 };
-
-export default UsersPanel;
diff --git a/src/app/(pages)/(protected)/layout.tsx b/src/app/(pages)/(protected)/layout.tsx
index 49e4ca3b..cb630c63 100644
--- a/src/app/(pages)/(protected)/layout.tsx
+++ b/src/app/(pages)/(protected)/layout.tsx
@@ -1,17 +1,15 @@
 import { UserRole } from '@prisma/client';
 
-import { RoleGate } from '~/components/role-gate';
+import { RoleGate } from '~/components/base/role-gate';
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;
 };
 
-const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
+export default function ProtectedLayout({ children }: ProtectedLayoutProps) {
 	return (
 		<RoleGate allowedRoles={[UserRole.USER]}>
 			{children}
 		</RoleGate>
 	);
 };
- 
-export default ProtectedLayout;
\ No newline at end of file
diff --git a/src/app/(pages)/(protected)/user/[userId]/page.tsx b/src/app/(pages)/(protected)/user/[userId]/page.tsx
index 98f3933c..e2a5dce8 100644
--- a/src/app/(pages)/(protected)/user/[userId]/page.tsx
+++ b/src/app/(pages)/(protected)/user/[userId]/page.tsx
@@ -6,25 +6,25 @@ import { useState, useTransition } from 'react';
 
 import { Button, Text, TextInput, Group, Stack, Badge } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useViewportSize } from '@mantine/hooks';
 import { UserRole } from '@prisma/client';
 import { signOut } from 'next-auth/react';
 import { useSession } from 'next-auth/react';
 
+import { Tile } from '~/components/base/tile';
 import ForkInfo from '~/components/fork';
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useCurrentUser } from '~/hooks/use-current-user';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, GRADIENT, MAX_NAME_LENGTH, MIN_NAME_LENGTH } from '~/lib/constants';
 import { notify } from '~/lib/utils';
-import { deleteFork } from '~/server/actions/git';
+import { deleteFork } from '~/server/actions/octokit';
 import { getUserById } from '~/server/data/user';
 import { updateUser } from '~/server/data/user';
 
 import type { User } from '@prisma/client';
 
-const UserPage = () => {
+export default function UserPage() {
 	const params = useParams();
 	const user = useCurrentUser()!;
 	const self = params.userId === 'me';
@@ -35,7 +35,7 @@ const UserPage = () => {
 
 	const { update } = useSession();
 	const [loading, startTransition] = useTransition();
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const form = useForm<Pick<User, 'name' | 'image'>>({
 		initialValues: { name: user.name!, image: user.image! },
@@ -95,7 +95,7 @@ const UserPage = () => {
 	return (displayedUser && (
 		<Stack gap="xl">
 			<Group
-				wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
+				wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
 				gap="xs"
 				align="start"
 				justify="center"
@@ -118,11 +118,11 @@ const UserPage = () => {
 					</Badge>
 				</Stack>
 
-				<Tile w="100%" p="sm" h={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'auto' : 160}>
+				<Tile w="100%" p="sm" h={width <= BREAKPOINT_MOBILE_LARGE ? 'auto' : 160}>
 					<Group
 						h="100%"
 						justify="space-between"
-						wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
+						wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
 					>
 						<Stack
 							h="100%"
@@ -148,12 +148,12 @@ const UserPage = () => {
 							justify="space-between"
 							align="flex-end"
 							style={{
-								flexDirection: windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'column-reverse' : 'column',
+								flexDirection: width <= BREAKPOINT_MOBILE_LARGE ? 'column-reverse' : 'column',
 							}}
 						>
 							<Button
-								justify={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'center' : 'right'}
-								fullWidth={windowWidth <= BREAKPOINT_MOBILE_LARGE}
+								justify={width <= BREAKPOINT_MOBILE_LARGE ? 'center' : 'right'}
+								fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
 								variant="transparent"
 								color="red"
 								onClick={() => signOut({ callbackUrl: '/' })}
@@ -165,7 +165,7 @@ const UserPage = () => {
 								gradient={GRADIENT}
 								onClick={() => onSubmit(form.values)}
 								disabled={loading || !form.isValid() || user === undefined}
-								fullWidth={windowWidth <= BREAKPOINT_MOBILE_LARGE}
+								fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
 								loading={loading}
 							>
 								Save
@@ -202,7 +202,7 @@ const UserPage = () => {
 							onClick={handleForkDelete}
 							disabled={!forkUrl}
 							loading={loading}
-							fullWidth={windowWidth <= BREAKPOINT_MOBILE_LARGE}
+							fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
 						>
 							Delete Fork
 						</Button>
@@ -212,5 +212,3 @@ const UserPage = () => {
 		</Stack>
 	));
 };
-
-export default UserPage;
diff --git a/src/app/(pages)/[...rest]/page.tsx b/src/app/(pages)/[...rest]/page.tsx
index 6239bfee..2ef8e103 100644
--- a/src/app/(pages)/[...rest]/page.tsx
+++ b/src/app/(pages)/[...rest]/page.tsx
@@ -1,10 +1,10 @@
 import { Stack, Text, Title } from '@mantine/core';
 
-export default async function Home() {
+export default async function NotFoundPage() {
 	return (
-		<Stack 
-			align="center" 
-			justify="center" 
+		<Stack
+			align="center"
+			justify="center"
 			gap="md"
 			style={{ height: 'calc(81% - (2 * var(--mantine-spacing-sm) - 62px))' }}
 		>
diff --git a/src/app/(pages)/docs/tos/page.tsx b/src/app/(pages)/docs/tos/page.tsx
index 67a77e01..c172bbb6 100644
--- a/src/app/(pages)/docs/tos/page.tsx
+++ b/src/app/(pages)/docs/tos/page.tsx
@@ -2,9 +2,9 @@
 
 import { List, Text } from '@mantine/core';
 
-import { Tile } from '~/components/tile';
+import { Tile } from '~/components/base/tile';
 
-export default function RulesPage() {
+export default function TOSPage() {
 
 	const mantineTextWidthFix = {
 		width: 'calc(100% - var(--mantine-spacing-lg))',
diff --git a/src/app/(pages)/layout.tsx b/src/app/(pages)/layout.tsx
index cae49b8b..49a0ce5a 100644
--- a/src/app/(pages)/layout.tsx
+++ b/src/app/(pages)/layout.tsx
@@ -9,10 +9,11 @@ import { BREAKPOINT_DESKTOP_LARGE } from '~/lib/constants';
 
 import type { Metadata } from 'next';
 
-// Import styles of packages that you"ve installed.
+// Import styles of packages that you've installed.
 // All packages except `@mantine/hooks` require styles imports
 import '@mantine/core/styles.css';
 import '@mantine/dropzone/styles.css';
+import '@mantine/carousel/styles.css';
 import '../globals.scss';
 
 import '~/lib/polyfills';
diff --git a/src/app/(pages)/modpacks/page.tsx b/src/app/(pages)/modpacks/page.tsx
index c4666f5c..fbd32bc5 100644
--- a/src/app/(pages)/modpacks/page.tsx
+++ b/src/app/(pages)/modpacks/page.tsx
@@ -1,6 +1,6 @@
 import { Group, Text } from '@mantine/core';
 
-export default async function Modpacks() {
+export default async function ModpacksPage() {
 	return (
 		<Group align="center" className="w-full" h="500">
 			<Text fw={300} size="xl" className="w-full" ta="center">🚧 Page under construction 🚧</Text>
diff --git a/src/app/(pages)/mods/[modId]/gallery/page.tsx b/src/app/(pages)/mods/[modId]/gallery/page.tsx
index 0d6a51d3..9a7a5fb2 100644
--- a/src/app/(pages)/mods/[modId]/gallery/page.tsx
+++ b/src/app/(pages)/mods/[modId]/gallery/page.tsx
@@ -6,10 +6,10 @@ import { useEffect, useMemo, useRef, useState, useTransition } from 'react';
 
 import { CloseButton, Group, Loader, Pagination, Select, Stack, Text, TextInput } from '@mantine/core';
 import { usePrevious } from '@mantine/hooks';
+import { useViewportSize } from '@mantine/hooks';
 import { Resolution } from '@prisma/client';
 
-import { GalleryTextureWithContribution } from '~/components/texture-contribution';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { GalleryTextureWithContribution } from '~/components/textures/texture-gallery-contribution';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET, ITEMS_PER_PAGE, ITEMS_PER_ROW } from '~/lib/constants';
 import { searchFilter } from '~/lib/utils';
@@ -44,7 +44,7 @@ export default function ModGalleryPage() {
 	const [search, setSearch] = useState('');
 	const prevSearchedTextures = usePrevious(texturesFiltered);
 
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 	const texturesGroupRef = useRef<HTMLDivElement>(null);
 
 	useEffectOnce(() => {
@@ -97,9 +97,9 @@ export default function ModGalleryPage() {
 
 	return (
 		<Stack gap="sm" mb="sm" ref={texturesGroupRef} maw="1384">
-			<Group gap="sm" wrap={windowWidth <= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
+			<Group gap="sm" wrap={width <= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
 				<Group
-					w={windowWidth <= BREAKPOINT_TABLET ? '100%' : '30%'}
+					w={width <= BREAKPOINT_TABLET ? '100%' : '30%'}
 					gap="sm"
 					wrap="nowrap"
 				>
@@ -123,13 +123,13 @@ export default function ModGalleryPage() {
 					/>
 				</Group>
 				<Group
-					w={windowWidth <= BREAKPOINT_TABLET ? '100%' : '70%'}
+					w={width <= BREAKPOINT_TABLET ? '100%' : '70%'}
 					gap="sm"
-					wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
+					wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
 				>
 					<TextInput
 						w="100%"
-						maw={windowWidth > BREAKPOINT_MOBILE_LARGE ? 'calc(100% - 240px - var(--mantine-spacing-sm))' : undefined}
+						maw={width > BREAKPOINT_MOBILE_LARGE ? 'calc(100% - 240px - var(--mantine-spacing-sm))' : undefined}
 						label="Search"
 						value={search}
 						onChange={(e) => setSearch(e.currentTarget.value)}
@@ -147,7 +147,7 @@ export default function ModGalleryPage() {
 						value={texturesShownPerPage}
 						onChange={(e) => e ? setTexturesShownPerPage(e) : null}
 						checkIconPosition="right"
-						w={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
+						w={width <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
 					/>
 					<Select
 						label="Textures per row"
@@ -155,7 +155,7 @@ export default function ModGalleryPage() {
 						value={texturesShownPerRow.toString()}
 						onChange={(e) => e ? setTexturesShownPerRow(parseInt(e)) : null}
 						checkIconPosition="right"
-						w={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
+						w={width <= BREAKPOINT_MOBILE_LARGE ? 'calc(50% - var(--mantine-spacing-sm) / 2)' : 120}
 					/>
 				</Group>
 			</Group>
diff --git a/src/app/(pages)/mods/[modId]/layout.tsx b/src/app/(pages)/mods/[modId]/layout.tsx
index 0197c14d..0271daaf 100644
--- a/src/app/(pages)/mods/[modId]/layout.tsx
+++ b/src/app/(pages)/mods/[modId]/layout.tsx
@@ -10,10 +10,10 @@ import { IoChevronBackOutline } from 'react-icons/io5';
 import { TfiWorld } from 'react-icons/tfi';
 
 import { Button, Group, Loader, Stack, Text, Title } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { TabsLayout } from '~/components/tabs';
-import { TextureImage } from '~/components/texture-img';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { TabsLayout } from '~/components/base/tabs-layout';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 import { getModDownloads, getModFromForgeId } from '~/server/data/mods';
@@ -27,8 +27,8 @@ export default function ModLayout({ children }: { children: React.ReactNode }) {
 	const modId = useParams().modId as string;
 	const [mod, setMod] = useState<Mod | null>(null);
 
-	const [windowWidth] = useDeviceSize();
-	const slice = windowWidth <= BREAKPOINT_MOBILE_LARGE ? 2 : 5;
+	const { width } = useViewportSize();
+	const slice = width <= BREAKPOINT_MOBILE_LARGE ? 2 : 5;
 
 	const [downloads, setDownloads] = useState<Downloads | null>(null);
 
@@ -84,7 +84,7 @@ export default function ModLayout({ children }: { children: React.ReactNode }) {
 					<TextureImage
 						src={mod.image ?? './icon.png'}
 						alt={mod.name}
-						size={windowWidth <= BREAKPOINT_MOBILE_LARGE ? '85px' : '120px'}
+						size={width <= BREAKPOINT_MOBILE_LARGE ? '85px' : '120px'}
 						styles={{
 							borderRadius: 5,
 							backgroundImage: 'none',
@@ -95,7 +95,7 @@ export default function ModLayout({ children }: { children: React.ReactNode }) {
 					<Stack
 						align="start"
 						gap="xs"
-						mih={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 85 : 120}
+						mih={width <= BREAKPOINT_MOBILE_LARGE ? 85 : 120}
 						w="100%"
 					>
 						<Stack gap={0}>
@@ -108,7 +108,7 @@ export default function ModLayout({ children }: { children: React.ReactNode }) {
 									</Text>
 								)}
 							</Group>
-							{mod.description && (<Text size="sm" lineClamp={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 1 : 2}>{mod.description}</Text>)}
+							{mod.description && (<Text size="sm" lineClamp={width <= BREAKPOINT_MOBILE_LARGE ? 1 : 2}>{mod.description}</Text>)}
 							{!mod.description && (<Text size="sm" c="dimmed">No description</Text>)}
 						</Stack>
 
diff --git a/src/app/(pages)/mods/[modId]/page.tsx b/src/app/(pages)/mods/[modId]/page.tsx
index 6d1469a6..878632bf 100644
--- a/src/app/(pages)/mods/[modId]/page.tsx
+++ b/src/app/(pages)/mods/[modId]/page.tsx
@@ -8,10 +8,10 @@ import { HiDownload } from 'react-icons/hi';
 
 import { Button, Group, Pagination, Progress, Select, Stack, Text, TextInput, Tooltip } from '@mantine/core';
 import { usePrevious } from '@mantine/hooks';
+import { useViewportSize } from '@mantine/hooks';
 import { Resolution } from '@prisma/client';
 
-import { Tile } from '~/components/tile';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { Tile } from '~/components/base/tile';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE, ITEMS_PER_PAGE, RESOLUTIONS_COLORS, EMPTY_PROGRESSION, ITEMS_PER_PAGE_DEFAULT } from '~/lib/constants';
 import { getModFromForgeId } from '~/server/data/mods';
@@ -24,7 +24,7 @@ export default function ModPage() {
 	const modId = useParams().modId as string;
 	const [mod, setMod] = useState<Mod | null>(null);
 
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 
 	const itemsPerPage = useMemo(() => ITEMS_PER_PAGE, []);
 	const [activePage, setActivePage] = useState(1);
@@ -168,9 +168,9 @@ export default function ModPage() {
 								</Group>
 
 								<Group
-									gap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'md' : 'sm'}
-									wrap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
-									style={{ flexDirection: windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'column-reverse' : 'row' }}
+									gap={width <= BREAKPOINT_MOBILE_LARGE ? 'md' : 'sm'}
+									wrap={width <= BREAKPOINT_MOBILE_LARGE ? 'wrap' : 'nowrap'}
+									style={{ flexDirection: width <= BREAKPOINT_MOBILE_LARGE ? 'column-reverse' : 'row' }}
 								>
 									<Group w="100%" wrap="nowrap" gap="sm">
 										{resolutions.map((res) => (
@@ -188,7 +188,7 @@ export default function ModPage() {
 													leftSection={<HiDownload size={14} />}
 													variant="light"
 													color={RESOLUTIONS_COLORS[res]}
-													w={windowWidth <= BREAKPOINT_MOBILE_LARGE ? '100%' : 'auto'}
+													w={width <= BREAKPOINT_MOBILE_LARGE ? '100%' : 'auto'}
 													className={progressions?.[ver.id]?.textures.done[res] === 0 ? 'button-disabled-with-bg' : ''}
 													disabled={progressions?.[ver.id]?.textures.done[res] === 0}
 													onClick={() => handlePackDownload(ver.id, res)}
diff --git a/src/app/(pages)/mods/page.tsx b/src/app/(pages)/mods/page.tsx
index 0be00c6d..d46747c1 100644
--- a/src/app/(pages)/mods/page.tsx
+++ b/src/app/(pages)/mods/page.tsx
@@ -11,12 +11,11 @@ import { SiMojangstudios } from 'react-icons/si';
 import { TfiWorld } from 'react-icons/tfi';
 
 import { ActionIcon, Button, Checkbox, Group, InputLabel, MultiSelect, Pagination, Radio, Select, Stack, Text, TextInput } from '@mantine/core';
+import { useViewportSize, usePrevious } from '@mantine/hooks';
 
-import { TextureImage } from '~/components/texture-img';
-import { Tile } from '~/components/tile';
-import { useDeviceSize } from '~/hooks/use-device-size';
+import { Tile } from '~/components/base/tile';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
-import { usePrevious } from '~/hooks/use-previous';
 import { BREAKPOINT_MOBILE_LARGE, BREAKPOINT_TABLET, ITEMS_PER_PAGE, ITEMS_PER_PAGE_DEFAULT, MODS_LOADERS } from '~/lib/constants';
 import { searchFilter, sortByName, sortBySemver } from '~/lib/utils';
 import { getModsOfModsPage } from '~/server/data/mods';
@@ -29,12 +28,12 @@ import type { Writable } from '~/types';
 import './mods.scss';
 import '~/lib/polyfills';
 
-export default function Mods() {
-	const [windowWidth] = useDeviceSize();
+export default function ModsPage() {
+	const { width } = useViewportSize();
 
 	const [activePage, setActivePage] = useState(1);
 	const itemsPerPage = useMemo(() => ITEMS_PER_PAGE, []);
-	const slice = windowWidth <= BREAKPOINT_MOBILE_LARGE ? 2 : 5;
+	const slice = width <= BREAKPOINT_MOBILE_LARGE ? 2 : 5;
 
 	const [mods, setMods] = useState<ModOfModsPage[]>([]);
 	const [modsShown, setModsShown] = useState<ModOfModsPage[][]>([[]]);
@@ -53,7 +52,7 @@ export default function Mods() {
 	const [showModsNoTextures, setShowModsNoTextures] = useState(false);
 
 	const router = useRouter();
-	const maxOptionsShown = windowWidth > BREAKPOINT_TABLET ? 2 : 1;
+	const maxOptionsShown = width > BREAKPOINT_TABLET ? 2 : 1;
 
 	useEffectOnce(() => {
 		getModsOfModsPage().then(setMods);
@@ -112,8 +111,8 @@ export default function Mods() {
 	const filter = () => {
 		return (
 			<Tile
-				w={windowWidth <= BREAKPOINT_TABLET ? '100%' : 300}
-				mt={windowWidth <= BREAKPOINT_TABLET ? 0 : 24}
+				w={width <= BREAKPOINT_TABLET ? '100%' : 300}
+				mt={width <= BREAKPOINT_TABLET ? 0 : 24}
 				pt="xs"
 			>
 				<Stack gap="sm">
@@ -185,9 +184,9 @@ export default function Mods() {
 	const details = (m: ModOfModsPage) => {
 		return (
 			<Group
-				gap={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 0 : 'md'}
-				justify={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'space-between' : 'start'}
-				mb={windowWidth <= BREAKPOINT_MOBILE_LARGE ? -10 : 0}
+				gap={width <= BREAKPOINT_MOBILE_LARGE ? 0 : 'md'}
+				justify={width <= BREAKPOINT_MOBILE_LARGE ? 'space-between' : 'start'}
+				mb={width <= BREAKPOINT_MOBILE_LARGE ? -10 : 0}
 			>
 				{m.url && (
 					<Button
@@ -197,7 +196,7 @@ export default function Mods() {
 						leftSection={<TfiWorld />}
 						p={0}
 					>
-						{windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'Website' : 'Mod Website'}
+						{width <= BREAKPOINT_MOBILE_LARGE ? 'Website' : 'Mod Website'}
 					</Button>
 				)}
 				<Group gap="xs" wrap="nowrap">
@@ -232,11 +231,11 @@ export default function Mods() {
 
 			wrap="nowrap"
 		>
-			{windowWidth > BREAKPOINT_TABLET && filter()}
+			{width > BREAKPOINT_TABLET && filter()}
 
 			<Stack w="100%" gap="sm">
 				<Group align="end" gap="sm" wrap="nowrap">
-					{windowWidth <= BREAKPOINT_TABLET && (
+					{width <= BREAKPOINT_TABLET && (
 						<ActionIcon
 							variant="default"
 							className="navbar-icon-fix filter-icon"
@@ -261,7 +260,7 @@ export default function Mods() {
 					/>
 				</Group>
 
-				{windowWidth <= BREAKPOINT_TABLET && showFilters && filter()}
+				{width <= BREAKPOINT_TABLET && showFilters && filter()}
 
 				{filteredMods.length === 0 && (
 					<Group
@@ -276,7 +275,7 @@ export default function Mods() {
 				)}
 
 				{
-					(windowWidth > BREAKPOINT_TABLET || (windowWidth <= BREAKPOINT_TABLET && !showFilters)) &&
+					(width > BREAKPOINT_TABLET || (width <= BREAKPOINT_TABLET && !showFilters)) &&
 					modsShown[activePage - 1] && modsShown[activePage - 1]?.map((m) => (
 						<Tile
 							key={m.id}
@@ -289,12 +288,12 @@ export default function Mods() {
 										solidBackground
 										src={m.image ?? './icon.png'}
 										alt={m.name}
-										size={windowWidth <= BREAKPOINT_MOBILE_LARGE ? '85px' : '120px'}
+										size={width <= BREAKPOINT_MOBILE_LARGE ? '85px' : '120px'}
 									/>
 									<Stack
 										justify="space-between"
 										w="100%"
-										h={windowWidth <= BREAKPOINT_MOBILE_LARGE ? '85px' : '120px'}
+										h={width <= BREAKPOINT_MOBILE_LARGE ? '85px' : '120px'}
 									>
 										<Stack gap={0}>
 											<Group gap={5} align="baseline">
@@ -310,11 +309,11 @@ export default function Mods() {
 											{!m.description && (<Text size="sm" c="dimmed">No description</Text>)}
 										</Stack>
 
-										{windowWidth > BREAKPOINT_MOBILE_LARGE && details(m)}
+										{width > BREAKPOINT_MOBILE_LARGE && details(m)}
 									</Stack>
 								</Group>
 
-								{windowWidth <= BREAKPOINT_MOBILE_LARGE && details(m)}
+								{width <= BREAKPOINT_MOBILE_LARGE && details(m)}
 							</Stack>
 						</Tile>
 					))}
diff --git a/src/app/(pages)/page.tsx b/src/app/(pages)/page.tsx
index 444380bd..c798ea36 100644
--- a/src/app/(pages)/page.tsx
+++ b/src/app/(pages)/page.tsx
@@ -1,6 +1,6 @@
 import { Image, Text, Stack } from '@mantine/core';
 
-export default async function Home() {
+export default async function HomePage() {
 	return (
 		<Stack mah="calc(100% - 120px)" gap="0" h="100%">
 			<Stack align="center" justify="center" gap="sm" h="100%">
diff --git a/src/components/base/fake-input-label.tsx b/src/components/base/fake-input-label.tsx
new file mode 100644
index 00000000..3dda7683
--- /dev/null
+++ b/src/components/base/fake-input-label.tsx
@@ -0,0 +1,49 @@
+import type { FC } from 'react';
+
+import { Stack, Text } from '@mantine/core';
+
+interface Props {
+	children: React.ReactNode;
+	label: string;
+	description?: string;
+	gap?: number | string;
+	style?: React.CSSProperties;
+}
+
+export const FakeInputLabel: FC<Props> = ({ gap, label, description, children, style }) => {
+	return (
+		<Stack gap={0} mt={2} style={style}>
+			<Stack gap={0}>
+				<Text
+					lh="var(--mantine-line-height)"
+					size="var(--mantine-font-size-sm)"
+					fw={500}
+				>
+					{label}
+				</Text>
+				<FakeInputDescription description={description} />
+			</Stack>
+
+			<div
+				style={{
+					marginTop: gap ? gap : description ? 'calc(var(--mantine-spacing-xs) / 2)' : 1,
+				}}
+			>
+				{children}
+			</div>
+		</Stack>
+	);
+};
+
+export const FakeInputDescription: FC<Pick<Props, 'description' | 'style'>> = ({ description, style }) => {
+	return (
+		<Text
+			lh={1.2}
+			size="var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(.125rem * var(--mantine-scale))))"
+			style={style}
+			c="dimmed"
+		>
+			{description}
+		</Text>
+	);
+};
diff --git a/src/components/modal.tsx b/src/components/base/modal.tsx
similarity index 63%
rename from src/components/modal.tsx
rename to src/components/base/modal.tsx
index 46fd2bdc..d21b3cce 100644
--- a/src/components/modal.tsx
+++ b/src/components/base/modal.tsx
@@ -1,9 +1,11 @@
+import type { FC } from 'react';
+
 import { Modal as MantineModal, Title } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
-interface ModalProps {
+interface Props {
 	opened: boolean;
 	onClose: () => void;
 	title?: React.ReactNode;
@@ -13,8 +15,8 @@ interface ModalProps {
 	children?: React.ReactNode;
 }
 
-export function Modal({ opened, onClose, title, children, popup, forceFullScreen }: ModalProps) {
-	const [windowWidth] = useDeviceSize();
+export const Modal: FC<Props> = ({ opened, onClose, title, children, popup, forceFullScreen }) => {
+	const { width } = useViewportSize();
 
 	return (
 		<MantineModal
@@ -26,9 +28,9 @@ export function Modal({ opened, onClose, title, children, popup, forceFullScreen
 			trapFocus
 			closeOnClickOutside={false}
 			closeOnEscape={false}
-			fullScreen={!popup && windowWidth <= BREAKPOINT_MOBILE_LARGE || forceFullScreen}
+			fullScreen={!popup && width <= BREAKPOINT_MOBILE_LARGE || forceFullScreen}
 		>
 			{children}
 		</MantineModal>
 	);
-}
+};
diff --git a/src/components/role-gate.tsx b/src/components/base/role-gate.tsx
similarity index 84%
rename from src/components/role-gate.tsx
rename to src/components/base/role-gate.tsx
index 3dc5e582..c5623cb6 100644
--- a/src/components/role-gate.tsx
+++ b/src/components/base/role-gate.tsx
@@ -1,19 +1,21 @@
 'use client';
 
+import type { FC } from 'react';
+
 import { Stack, Title, Text } from '@mantine/core';
 import { UserRole } from '@prisma/client';
 
 import { useCurrentUser } from '~/hooks/use-current-user';
 
-interface RoleGateProps {
+interface Props {
   children: React.ReactNode;
   allowedRoles: UserRole[];
 };
 
-export const RoleGate = ({
-	children,
-	allowedRoles,
-}: RoleGateProps) => {
+/**
+ * A component that gates access to children based on the logged user's role.
+ */
+export const RoleGate: FC<Props> = ({ children, allowedRoles }) => {
 	const user = useCurrentUser();
 	const role = user?.role;
 
diff --git a/src/components/small-tile.tsx b/src/components/base/small-tile.tsx
similarity index 65%
rename from src/components/small-tile.tsx
rename to src/components/base/small-tile.tsx
index d4311d20..833e1052 100644
--- a/src/components/small-tile.tsx
+++ b/src/components/base/small-tile.tsx
@@ -1,8 +1,10 @@
+import type { FC } from 'react';
+
 import { Tile } from './tile';
 
 import type { CardProps, PolymorphicComponentProps } from '@mantine/core';
 
-export function SmallTile({ children, style, ...props }: PolymorphicComponentProps<'div', CardProps>) {
+export const SmallTile: FC<PolymorphicComponentProps<'div', CardProps>> = ({ children, style, ...props }) => {
 	return (
 		<Tile
 			w="100%"
@@ -17,4 +19,4 @@ export function SmallTile({ children, style, ...props }: PolymorphicComponentPro
 			{children}
 		</Tile>
 	);
-}
+};
diff --git a/src/components/tabs.tsx b/src/components/base/tabs-layout.tsx
similarity index 71%
rename from src/components/tabs.tsx
rename to src/components/base/tabs-layout.tsx
index e3d52f3e..b3aca0de 100644
--- a/src/components/tabs.tsx
+++ b/src/components/base/tabs-layout.tsx
@@ -3,11 +3,11 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useMemo } from 'react';
 
 import { Tabs } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
-interface TabsLayoutProps<T extends string[]> {
+interface Props<T extends string[]> {
 	noMargin?: boolean;
 	children: React.ReactNode;
 	defaultValue?: T[number];
@@ -20,8 +20,8 @@ interface TabsLayoutProps<T extends string[]> {
 	}[];
 };
 
-export const TabsLayout = <T extends string[]>({ children, tabs, defaultValue, isLayout, variant, noMargin }: TabsLayoutProps<T>) => {
-	const [windowWidth] = useDeviceSize();
+export const TabsLayout = <T extends string[]>({ children, tabs, defaultValue, isLayout, variant, noMargin }: Props<T>) => {
+	const { width } = useViewportSize();
 	const router = useRouter();
 	const pathname = usePathname();
 
@@ -47,20 +47,20 @@ export const TabsLayout = <T extends string[]>({ children, tabs, defaultValue, i
 				return router.push(`${(pathname.endsWith('/') ? pathname : `${pathname}/`).replace(currentTab, '')}${value}`);
 			}}
 
-			orientation={windowWidth > BREAKPOINT_MOBILE_LARGE ? 'vertical' : 'horizontal'}
-			ml={windowWidth > BREAKPOINT_MOBILE_LARGE && tabsStyle === 'default' ? -125 : 0}
+			orientation={width > BREAKPOINT_MOBILE_LARGE ? 'vertical' : 'horizontal'}
+			ml={width > BREAKPOINT_MOBILE_LARGE && tabsStyle === 'default' ? -125 : 0}
 
 			variant={tabsStyle === 'filled'
-				? windowWidth > BREAKPOINT_MOBILE_LARGE ? 'pills' : 'default'
+				? width > BREAKPOINT_MOBILE_LARGE ? 'pills' : 'default'
 				: 'default'
 			}
 
 			defaultValue={defaultValue}
 		>
 			<Tabs.List
-				mt={tabsStyle === 'filled' && windowWidth > BREAKPOINT_MOBILE_LARGE && !noMargin ? 26 : 0}
+				mt={tabsStyle === 'filled' && width > BREAKPOINT_MOBILE_LARGE && !noMargin ? 26 : 0}
 				mah={tabsStyle === 'default' ? tabs.length * 34 : undefined}
-				w={windowWidth > BREAKPOINT_MOBILE_LARGE ? (tabsStyle === 'default' ? 200 : 120) : undefined}
+				w={width > BREAKPOINT_MOBILE_LARGE ? (tabsStyle === 'default' ? 200 : 120) : undefined}
 			>
 				{tabs.map((tab) => (
 					<Tabs.Tab
@@ -78,8 +78,8 @@ export const TabsLayout = <T extends string[]>({ children, tabs, defaultValue, i
 			<Tabs.Panel
 				maw={tabsStyle === 'default' ? '1429px' : undefined}
 				value={currentTab}
-				pl={windowWidth > BREAKPOINT_MOBILE_LARGE ? 'sm' : '0'}
-				pt={windowWidth > BREAKPOINT_MOBILE_LARGE ? '0' : 'sm'}
+				pl={width > BREAKPOINT_MOBILE_LARGE ? 'sm' : '0'}
+				pt={width > BREAKPOINT_MOBILE_LARGE ? '0' : 'sm'}
 			>
 				{children}
 			</Tabs.Panel>
diff --git a/src/components/theme-switch.tsx b/src/components/base/theme-switch.tsx
similarity index 94%
rename from src/components/theme-switch.tsx
rename to src/components/base/theme-switch.tsx
index 3414abf4..efe4b878 100644
--- a/src/components/theme-switch.tsx
+++ b/src/components/base/theme-switch.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import type { FC } from 'react';
 
 import { TbSun, TbMoon, TbSunMoon, TbCloud } from 'react-icons/tb';
 
@@ -8,7 +9,7 @@ import { ActionIcon, useMantineColorScheme } from '@mantine/core';
 
 import type { MantineColorScheme } from '@mantine/core';
 
-export const ThemeSwitch = () => {
+export const ThemeSwitch: FC = () => {
 	const colorSchemes: MantineColorScheme[] = ['light', 'dark', 'auto'];
 
 	const [icon, setIcon] = useState<React.ReactNode>(<TbCloud className="w-5 h-5"/>);
diff --git a/src/components/base/tile.tsx b/src/components/base/tile.tsx
new file mode 100644
index 00000000..27a2fece
--- /dev/null
+++ b/src/components/base/tile.tsx
@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+
+import { Card } from '@mantine/core';
+
+import type { CardProps, MantineColor, PolymorphicComponentProps } from '@mantine/core';
+
+interface Props {
+	shadowless?: boolean;
+	transparent?: boolean;
+	color?: MantineColor;
+}
+
+export const Tile: FC<PolymorphicComponentProps<'div', CardProps> & Props> = ({
+	children,
+	shadowless,
+	transparent,
+	color,
+	...props
+}) => {
+	return (
+		<Card
+			shadow={!shadowless ? 'sm' : 'none'}
+			radius="md"
+			padding="md"
+			{...props}
+			className={transparent ? `transparent ${props.className}` : props.className}
+			style={{
+				backgroundColor: color ? `var(--mantine-color-${color}-filled)` : undefined,
+				...props.style,
+			}}
+		>
+			{children}
+		</Card>
+	);
+};
diff --git a/src/components/dashboard-item/dashboard-item.tsx b/src/components/dashboard-item/dashboard-item.tsx
index 96d4df6a..9c979fa9 100644
--- a/src/components/dashboard-item/dashboard-item.tsx
+++ b/src/components/dashboard-item/dashboard-item.tsx
@@ -1,15 +1,17 @@
 
+import type { FC } from 'react';
+
 import { Group, Image, Stack, Text } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { BREAKPOINT_DESKTOP_LARGE, BREAKPOINT_DESKTOP_MEDIUM, BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
 
-import { Tile } from '../tile';
+import { Tile } from '../base/tile';
 import { WarningIcon } from '../warning-icon';
 
 import './dashboard.scss';
 
-export interface ItemDisplayProps {
+interface Props {
 	image?: string | null,
 	title: string,
 	description?: string | null,
@@ -17,19 +19,19 @@ export interface ItemDisplayProps {
 	onClick: () => void
 }
 
-export function DashboardItem({ image, title, description, onClick, warning }: ItemDisplayProps) {
-	const [windowWidth] = useDeviceSize();
+export const DashboardItem: FC<Props> = ({ image, title, description, onClick, warning }) => {
+	const { width } = useViewportSize();
 
 	return (
 		<Tile
 			p={0}
 			className='dashboard-item'
 			style={{
-				'--dashboard-item-count': windowWidth <= BREAKPOINT_MOBILE_LARGE
+				'--dashboard-item-count': width <= BREAKPOINT_MOBILE_LARGE
 					? 1
-					: windowWidth <= BREAKPOINT_DESKTOP_MEDIUM
+					: width <= BREAKPOINT_DESKTOP_MEDIUM
 						? 2
-						: windowWidth <= BREAKPOINT_DESKTOP_LARGE
+						: width <= BREAKPOINT_DESKTOP_LARGE
 							? 3
 							: 4,
 			}}
@@ -71,4 +73,4 @@ export function DashboardItem({ image, title, description, onClick, warning }: I
 			</Group>
 		</Tile>
 	);
-}
+};
diff --git a/src/components/fakeInputLabel.tsx b/src/components/fakeInputLabel.tsx
deleted file mode 100644
index 5021e9d1..00000000
--- a/src/components/fakeInputLabel.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Stack, Text } from '@mantine/core';
-
-interface Props {
-	children: React.ReactNode;
-	label: string;
-	description?: string;
-	gap?: number | string;
-}
-
-export function FakeInputLabel({ gap, label, description, children }: Props) {
-	return (
-		<Stack gap={0} mt={2}>
-			<Stack gap={0}>
-				<Text
-					lh="var(--mantine-line-height)"
-					size="var(--mantine-font-size-sm)"
-					fw={500}
-				>
-					{label}
-				</Text>
-				<Text
-					lh={1.2}
-					size="var(--input-description-size, calc(var(--mantine-font-size-sm) - calc(.125rem * var(--mantine-scale))))"
-					c="dimmed"
-				>
-					{description}
-				</Text>
-			</Stack>
-
-			<div
-				style={{
-					marginTop: gap ? gap : description ? 'calc(var(--mantine-spacing-xs) / 2)' : 1,
-				}}
-			>
-				{children}
-			</div>
-		</Stack>
-	);
-}
diff --git a/src/components/fork.tsx b/src/components/fork.tsx
index 3bb06793..cd2675af 100644
--- a/src/components/fork.tsx
+++ b/src/components/fork.tsx
@@ -4,14 +4,14 @@ import { useTransition } from 'react';
 
 import { GoCheckCircle, GoStop } from 'react-icons/go';
 
-import { Button, Group, Text } from '@mantine/core';
+import { Button, Group, Image, Text } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { BREAKPOINT_MOBILE_LARGE } from '~/lib/constants';
-import { forkRepository, getFork } from '~/server/actions/git';
+import { forkRepository, getFork } from '~/server/actions/octokit';
 
-import { Tile } from './tile';
+import { Tile } from './base/tile';
 
 interface Props {
 	onUrlUpdate: (url: string | null) => void;
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function ForkInfo({ onUrlUpdate, forkUrl, hideIfForked }: Props) {
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 	const [loading, startTransition] = useTransition();
 
 	const handleSetupForkedRepository = async () => {
@@ -41,16 +41,31 @@ export default function ForkInfo({ onUrlUpdate, forkUrl, hideIfForked }: Props)
 
 	if (forkUrl) {
 		return (
-			<Tile p="xs" pl={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'xs' : 'md'} color="teal" mih={56}>
-				<Group gap="sm" mt="auto" mb="auto">
-					<GoCheckCircle size={20} color="white" />
-					<Group gap={3}>
-						<Text size="sm" c="white">Default textures repository forked: </Text>
-						<Text size="sm" c="white">
-							<Link href={forkUrl} style={{ color: 'white' }} target="_blank">
-								{windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'link' : forkUrl}
-							</Link>
-						</Text>
+			<Tile p="xs" pl={width <= BREAKPOINT_MOBILE_LARGE ? 'xs' : 'md'} color="teal" mih={56}>
+				<Group justify="space-between" gap="sm" mt="auto" mb="auto">
+					<Group gap="sm">
+						<GoCheckCircle size={20} color="white" />
+						<Group gap={3}>
+							<Text size="sm" c="white">Default textures repository forked: </Text>
+							<Text size="sm" c="white">
+								<Link href={forkUrl} style={{ color: 'white' }} target="_blank">
+									{width <= BREAKPOINT_MOBILE_LARGE ? 'link' : forkUrl}
+								</Link>
+							</Text>
+						</Group>
+					</Group>
+
+					<Group gap="sm">
+						<Button
+							variant="outline"
+							color="white"
+							onClick={() => window.location.href = `x-github-client://openRepo/${forkUrl}`}
+							loading={loading}
+							fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
+							rightSection={<Image src="/gh_desktop.png" alt="" h={20} />}
+						>
+							Open with GitHub Desktop
+						</Button>
 					</Group>
 				</Group>
 			</Tile>
@@ -58,7 +73,7 @@ export default function ForkInfo({ onUrlUpdate, forkUrl, hideIfForked }: Props)
 	}
 
 	return (
-		<Tile p="xs" pl={windowWidth <= BREAKPOINT_MOBILE_LARGE ? 'xs' : 'md'} color="yellow">
+		<Tile p="xs" pl={width <= BREAKPOINT_MOBILE_LARGE ? 'xs' : 'md'} color="yellow">
 			<Group justify="space-between" gap="xs">
 				<Group gap="sm">
 					<GoStop color="black" size={20} />
@@ -73,7 +88,7 @@ export default function ForkInfo({ onUrlUpdate, forkUrl, hideIfForked }: Props)
 					onClick={handleSetupForkedRepository}
 					disabled={!!forkUrl}
 					loading={loading}
-					fullWidth={windowWidth <= BREAKPOINT_MOBILE_LARGE}
+					fullWidth={width <= BREAKPOINT_MOBILE_LARGE}
 				>
 					Create Fork
 				</Button>
diff --git a/src/components/mods-upload.tsx b/src/components/mods-upload.tsx
index c2212005..cd3c0d05 100644
--- a/src/components/mods-upload.tsx
+++ b/src/components/mods-upload.tsx
@@ -11,12 +11,12 @@ import { addModVersionsFromJAR } from '~/server/data/mods-version';
 
 import type { SocketModUpload } from '~/types';
 
-interface ModUploadProps {
+interface Props {
 	onUpload: () => void;
 	socketIdSuffix?: string;
 }
 
-export const ModUpload = ({ socketIdSuffix, onUpload }: ModUploadProps) => {
+export const ModUpload = ({ socketIdSuffix, onUpload }: Props) => {
 	const [status, setStatus] = useState<SocketModUpload | null>(null);
 	const userId = (socketIdSuffix ?? '') + useCurrentUser()!.id!;
 
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 413b18e8..c6306cea 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -14,21 +14,21 @@ import { MdDashboard } from 'react-icons/md';
 import { TbPackage, TbPackages } from 'react-icons/tb';
 
 import { ActionIcon, Avatar, Badge, Button, Divider, Group, Image, Menu } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import { UserRole } from '@prisma/client';
 import { signOut } from 'next-auth/react';
 
 import { GitHubLogin } from '~/components/github-login';
 import { useCurrentUser } from '~/hooks/use-current-user';
-import { useDeviceSize } from '~/hooks/use-device-size';
 import { BREAKPOINT_TABLET, GRADIENT } from '~/lib/constants';
 
-import { ThemeSwitch } from './theme-switch';
-import { Tile } from './tile';
+import { ThemeSwitch } from './base/theme-switch';
+import { Tile } from './base/tile';
 
 export const Navbar = () => {
 	const pathname = usePathname();
 	const user = useCurrentUser();
-	const [windowWidth] = useDeviceSize();
+	const { width } = useViewportSize();
 	const [userPicture, setUserPicture] = useState<string | undefined>(user?.image ?? undefined);
 
 	const links = [
@@ -53,7 +53,7 @@ export const Navbar = () => {
 		icon: <IoMdCloudUpload />,
 	});
 
-	if (windowWidth < BREAKPOINT_TABLET) links.unshift({
+	if (width < BREAKPOINT_TABLET) links.unshift({
 		href: '/',
 		label: 'Home',
 		disabled: false,
@@ -62,7 +62,7 @@ export const Navbar = () => {
 
 	return (
 		<Group gap="sm" mb="sm" mt="sm" wrap="nowrap" align="center" justify="center">
-			{windowWidth >= BREAKPOINT_TABLET && (
+			{width >= BREAKPOINT_TABLET && (
 				<>
 					<Tile padding="sm" radius="md" shadowless transparent style={{ minWidth: '62px' }}>
 						<Link href="/" className="navbar-icon-fix">
@@ -73,13 +73,13 @@ export const Navbar = () => {
 				</>
 			)}
 			<Tile padding="sm" radius="md" className="w-full" shadowless transparent>
-				<Group justify="space-between" wrap={windowWidth >= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
-					<Group gap="sm" wrap={windowWidth >= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
-						{windowWidth < BREAKPOINT_TABLET &&
+				<Group justify="space-between" wrap={width >= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
+					<Group gap="sm" wrap={width >= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
+						{width < BREAKPOINT_TABLET &&
 							<Menu
 								shadow="md"
 								position="bottom-start"
-								width={`calc(${windowWidth}px - (2 * var(--mantine-spacing-sm))`}
+								width={`calc(${width}px - (2 * var(--mantine-spacing-sm))`}
 							>
 								<Menu.Target>
 									<Button
@@ -112,10 +112,10 @@ export const Navbar = () => {
 								</Menu.Dropdown>
 							</Menu>
 						}
-						{user && user.role === UserRole.BANNED && windowWidth < BREAKPOINT_TABLET &&
+						{user && user.role === UserRole.BANNED && width < BREAKPOINT_TABLET &&
 							<Badge color="red" variant="light">banned</Badge>
 						}
-						{windowWidth >= BREAKPOINT_TABLET && links.map((link, index) => (
+						{width >= BREAKPOINT_TABLET && links.map((link, index) => (
 							<Link href={link.href} key={index}>
 								<Button
 									autoContrast
@@ -130,8 +130,8 @@ export const Navbar = () => {
 							</Link>
 						))}
 					</Group>
-					<Group gap="sm" wrap={windowWidth >= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
-						{user && user.role === UserRole.BANNED && windowWidth >= BREAKPOINT_TABLET &&
+					<Group gap="sm" wrap={width >= BREAKPOINT_TABLET ? 'wrap' : 'nowrap'}>
+						{user && user.role === UserRole.BANNED && width >= BREAKPOINT_TABLET &&
 							<Badge color="red" variant="light">banned</Badge>
 						}
 
diff --git a/src/components/texture-img.tsx b/src/components/texture-img.tsx
deleted file mode 100644
index bdc4a751..00000000
--- a/src/components/texture-img.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { CSSProperties } from 'react';
-
-import { HoverCard, Image, useMantineColorScheme } from '@mantine/core';
-
-import { useMCMETA } from '~/hooks/use-mcmeta';
-
-import type { TextureMCMETA } from '~/types';
-
-interface TextureImageProps {
-	solidBackground?: boolean;
-	isTransparent?: boolean;
-	src: string;
-	alt: string;
-	className?: string;
-	size?: number | string;
-	styles?: React.CSSProperties;
-	popupStyles?: React.CSSProperties;
-	notPixelated?: boolean;
-	fallback?: string;
-	mcmeta?: TextureMCMETA | null;
-	children?: React.ReactNode;
-	withArrow?: boolean;
-	onPopupClick?: () => void;
-	onClick?: () => void;
-}
-
-export function TextureImage({
-	solidBackground,
-	isTransparent,
-	src,
-	alt,
-	className,
-	size,
-	styles,
-	popupStyles,
-	mcmeta,
-	notPixelated,
-	children,
-	fallback,
-	onClick,
-	onPopupClick,
-}: TextureImageProps) {
-	const [_src, setSource] = useState(src);
-	const { canvasRef, isMCMETAValid } = useMCMETA(src, mcmeta);
-
-	const trueSize = size ? typeof size === 'number' ? `${size}px` : size : '200px';
-
-	const { colorScheme } = useMantineColorScheme();
-	const defaultFallback = colorScheme === 'dark' ? '/transparent.png' : '/transparent_light.png';
-
-	const imageStyle: CSSProperties = {
-		maxWidth: trueSize,
-		maxHeight: trueSize,
-		minWidth: trueSize,
-		minHeight: trueSize,
-		height: trueSize,
-		width: trueSize,
-		opacity: isTransparent ? 0.4 : 1,
-		filter: isTransparent ? 'grayscale(.6)' : 'none',
-	};
-
-	const containerStyle = {
-		...imageStyle,
-		opacity: 1,
-		...styles,
-	};
-
-	useEffect(() => {
-		setSource(src);
-	}, [src]);
-
-	const image = () => {
-		return (
-			<div className="texture-background" style={containerStyle}>
-				{(!mcmeta || !isMCMETAValid) && (
-					<Image
-						onClick={onClick}
-						src={_src}
-						alt={alt}
-						fit="contain"
-						style={{ ...imageStyle, ...styles }}
-						className={`${!notPixelated && 'image-pixelated'} ${solidBackground && 'solid-background'} ${className ?? ''} ${onClick && 'cursor-pointer'}`}
-						onError={() => setSource(fallback ?? defaultFallback)}
-					/>
-				)}
-				{mcmeta && isMCMETAValid && (
-					<canvas
-						ref={canvasRef}
-						onClick={onClick}
-						className={`${onClick && 'cursor-pointer'} ${solidBackground && 'solid-background'} ${className ?? ''}`}
-						style={imageStyle}
-					/>
-				)}
-			</div>
-		);
-	};
-
-	if (!children) return image();
-
-	return (
-		<HoverCard
-			position="right-start"
-			keepMounted={process.env.NODE_ENV === 'development'}
-		>
-			<HoverCard.Target>
-				{image()}
-			</HoverCard.Target>
-			<HoverCard.Dropdown
-				onClick={onPopupClick}
-				className="hover-card-popup"
-				style={popupStyles}
-			>
-				{children}
-			</HoverCard.Dropdown>
-		</HoverCard>
-	);
-}
diff --git a/src/components/texture-contribution.tsx b/src/components/textures/texture-gallery-contribution.tsx
similarity index 96%
rename from src/components/texture-contribution.tsx
rename to src/components/textures/texture-gallery-contribution.tsx
index 792b8894..853a30ae 100644
--- a/src/components/texture-contribution.tsx
+++ b/src/components/textures/texture-gallery-contribution.tsx
@@ -1,15 +1,15 @@
 import Link from 'next/link';
 
 import { useMemo, useState } from 'react';
-import type { RefObject } from 'react';
+import type { FC, RefObject } from 'react';
 
 import { GoHash, GoLinkExternal, GoLog, GoPeople, GoPerson } from 'react-icons/go';
 import { PiApproximateEquals } from 'react-icons/pi';
 
 import { Avatar, Group, Stack, Text } from '@mantine/core';
 
-import { SmallTile } from '~/components/small-tile';
-import { TextureImage } from '~/components/texture-img';
+import { SmallTile } from '~/components/base/small-tile';
+import { TextureImage } from '~/components/textures/texture-img';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { getVanillaResolution, getVanillaTextureSrc } from '~/lib/utils';
 import { getLatestVanillaTextureContribution } from '~/server/actions/faithful-pack';
@@ -26,14 +26,14 @@ interface Props {
 	contribution?: Prettify<Contribution & { owner: PublicUser, coAuthors: PublicUser[] }>;
 }
 
-export function GalleryTextureWithContribution({
+export const GalleryTextureWithContribution: FC<Props> = ({
 	container,
 	rowItemsGap,
 	rowItemsLength,
 	resolution,
 	texture,
 	contribution,
-}: Props) {
+}) => {
 
 	const src = useMemo(() => {
 		if (resolution === 'x16') return texture.filepath;
@@ -193,4 +193,4 @@ export function GalleryTextureWithContribution({
 			</Stack>
 		</TextureImage>
 	);
-}
+};
diff --git a/src/components/texture.tsx b/src/components/textures/texture-gallery.tsx
similarity index 90%
rename from src/components/texture.tsx
rename to src/components/textures/texture-gallery.tsx
index 683a2553..643e66d6 100644
--- a/src/components/texture.tsx
+++ b/src/components/textures/texture-gallery.tsx
@@ -1,17 +1,17 @@
 import { useMemo } from 'react';
-import type { RefObject } from 'react';
+import type { FC, RefObject } from 'react';
 
 import { GoAlert, GoHash, GoLog } from 'react-icons/go';
 import { PiApproximateEquals } from 'react-icons/pi';
 
 import { Group, Stack, Text } from '@mantine/core';
 
-import { SmallTile } from '~/components/small-tile';
-import { TextureImage } from '~/components/texture-img';
+import { SmallTile } from '~/components/base/small-tile';
+import { TextureImage } from '~/components/textures/texture-img';
 
 import type { Texture } from '@prisma/client';
 
-export interface GalleryTextureProps {
+interface Props {
 	container: RefObject<HTMLDivElement>;
 	rowItemsGap: number;
 	rowItemsLength: number;
@@ -20,14 +20,14 @@ export interface GalleryTextureProps {
 	onClick?: () => void;
 }
 
-export function GalleryTexture({
+export const GalleryTexture: FC<Props> = ({
 	container,
 	className,
 	rowItemsGap,
 	rowItemsLength,
 	texture,
 	onClick,
-}: GalleryTextureProps) {
+}) => {
 
 	const size = useMemo(() => ((container.current?.clientWidth ?? 1) - (rowItemsGap * (rowItemsLength - 1))) / rowItemsLength,
 		[container, rowItemsGap, rowItemsLength]
@@ -99,4 +99,4 @@ export function GalleryTexture({
 			</Stack>
 		</TextureImage>
 	);
-}
+};
diff --git a/src/components/textures/texture-img.tsx b/src/components/textures/texture-img.tsx
new file mode 100644
index 00000000..693c3aa6
--- /dev/null
+++ b/src/components/textures/texture-img.tsx
@@ -0,0 +1,91 @@
+import type { FC } from 'react';
+
+import { HoverCard, useMantineColorScheme } from '@mantine/core';
+import { Texture } from 'react-minecraft';
+
+import type { TextureMCMeta } from 'react-minecraft';
+
+interface Props {
+	isTransparent?: boolean;
+	isTiled?: boolean;
+	src: string;
+	alt: string;
+	className?: string;
+	size?: number | string;
+	styles?: React.CSSProperties;
+	popupStyles?: React.CSSProperties;
+	notPixelated?: boolean;
+	fallback?: string;
+	mcmeta?: TextureMCMeta | null;
+	children?: React.ReactNode;
+	withArrow?: boolean;
+	onPopupClick?: () => void;
+	onClick?: () => void;
+}
+
+export const TextureImage: FC<Props> = ({
+	isTransparent,
+	isTiled,
+	src,
+	alt,
+	className,
+	size,
+	styles,
+	popupStyles,
+	mcmeta,
+	children,
+	fallback,
+	onClick,
+	onPopupClick,
+}) => {
+	const trueSize = size ? typeof size === 'number' ? `${size}px` : size : '200px';
+	const { colorScheme } = useMantineColorScheme();
+
+	const image = () => {
+		return (
+			<div onClick={onClick}>
+				<Texture
+					src={src}
+					alt={alt}
+					animation={mcmeta && mcmeta.animation
+						? {
+							mcmeta: { animation: mcmeta.animation },
+							tiled: isTiled,
+						}
+						: undefined
+					}
+					size={trueSize}
+					className={className}
+					background={{
+						url: fallback ?? colorScheme === 'dark' ? '/transparent.png' : '/transparent_light.png',
+					}}
+					style={{
+						opacity: isTransparent ? 0.4 : 1,
+						filter: isTransparent ? 'grayscale(0.6)' : 'none',
+						...styles,
+					}}
+				/>
+			</div>
+		);
+	};
+
+	if (!children) return image();
+
+	return (
+		<HoverCard
+			position="right-start"
+			keepMounted={process.env.NODE_ENV === 'development'}
+		>
+			<HoverCard.Target>
+				{image()}
+			</HoverCard.Target>
+			<HoverCard.Dropdown
+				onClick={onPopupClick}
+				className="hover-card-popup"
+				style={popupStyles}
+			>
+				{children}
+			</HoverCard.Dropdown>
+		</HoverCard>
+	);
+};
diff --git a/src/components/tile.tsx b/src/components/tile.tsx
index 9104148c..cd99f695 100644
--- a/src/components/tile.tsx
+++ b/src/components/tile.tsx
@@ -1,25 +1,17 @@
-import { Card } from '@mantine/core';
-
-import type { CardProps, MantineColor, PolymorphicComponentProps } from '@mantine/core';
+import { Card, CardProps, PolymorphicComponentProps } from '@mantine/core';
 
 interface TileProps {
 	shadowless?: boolean;
-	transparent?: boolean;
-	color?: MantineColor;
 }
 
-export function Tile({ children, shadowless, transparent, color, ...props }: PolymorphicComponentProps<'div', CardProps> & TileProps) {
+export function Tile({ children, shadowless, ...props }: PolymorphicComponentProps<'div', CardProps> & TileProps) {
 	return (
 		<Card
+			withBorder
 			shadow={!shadowless ? 'sm' : 'none'}
 			radius="md"
 			padding="md"
 			{...props}
-			className={transparent ? `transparent ${props.className}` : props.className}
-			style={{
-				backgroundColor: color ? `var(--mantine-color-${color}-filled)` : undefined,
-				...props.style,
-			}}
 		>
 			{children}
 		</Card>
diff --git a/src/hooks/use-current-role.tsx b/src/hooks/use-current-role.tsx
deleted file mode 100644
index ea7ca400..00000000
--- a/src/hooks/use-current-role.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useSession } from 'next-auth/react';
-
-export const useCurrentRole = () => {
-	const session = useSession();
-
-	return session.data?.user?.role;
-};
diff --git a/src/hooks/use-current-user.tsx b/src/hooks/use-current-user.tsx
index af9df9a2..dea0f5c1 100644
--- a/src/hooks/use-current-user.tsx
+++ b/src/hooks/use-current-user.tsx
@@ -1,6 +1,12 @@
 import { useSession } from 'next-auth/react';
 
-export const useCurrentUser = () => {
+import type { ExtendedUser } from '../../next-auth';
+
+/**
+ * Get the current user from the session
+ * @returns The current user or undefined if not logged in
+ */
+export const useCurrentUser = (): ExtendedUser | undefined => {
 	const session = useSession();
 
 	return session.data?.user;
diff --git a/src/hooks/use-device-size.tsx b/src/hooks/use-device-size.tsx
deleted file mode 100644
index 1030d1d1..00000000
--- a/src/hooks/use-device-size.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useDeviceSize = (): [number, number] => {
-	const [width, setWidth] = useState(0);
-	const [height, setHeight] = useState(0);
-
-	const handleWindowResize = () => {
-		setWidth(window.innerWidth);
-		setHeight(window.innerHeight);
-	};
-
-	useEffect(() => {
-		// component is mounted and window is available
-		handleWindowResize();
-		window.addEventListener('resize', handleWindowResize);
-		// unsubscribe from the event on component unmount
-		return () => window.removeEventListener('resize', handleWindowResize);
-	}, []);
-
-	return [width, height];
-};
diff --git a/src/hooks/use-effect-once.tsx b/src/hooks/use-effect-once.tsx
index c9691f67..bfd0b165 100644
--- a/src/hooks/use-effect-once.tsx
+++ b/src/hooks/use-effect-once.tsx
@@ -1,6 +1,10 @@
 import { useEffect } from 'react';
 import type { EffectCallback } from 'react';
 
+/**
+ * Calls the effect function only once after the component is mounted.
+ * @warning the effect is called twice on Development mode due to React StrictMode.
+ */
 export function useEffectOnce(effect: EffectCallback) {
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect(effect, []);
diff --git a/src/hooks/use-mcmeta.tsx b/src/hooks/use-mcmeta.ts
similarity index 66%
rename from src/hooks/use-mcmeta.tsx
rename to src/hooks/use-mcmeta.ts
index 653e5bd0..49fdbcc2 100644
--- a/src/hooks/use-mcmeta.tsx
+++ b/src/hooks/use-mcmeta.ts
@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 
-import type { TextureMCMETA } from '~/types';
+import type { MCMETA, TextureMCMETA } from '~/types';
 
 interface Frame {
 	index: number;
 	duration: number;
 }
 
-export interface MCMETAHookResult {
+interface useAnimationReturn {
 	/**
 	 * A ref to the canvas element used for the animation
 	 */
@@ -27,7 +27,7 @@ export interface MCMETAHookResult {
  *
  * @author [Even Torset](https://github.com/EvenTorset) for the original MCMETA to canvas code
  */
-export function useMCMETA(imageURL: string, mcmeta?: TextureMCMETA | null): MCMETAHookResult {
+export function useMCMETA(mcmeta: TextureMCMETA, imageURL: string): useAnimationReturn {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 	const animationInterval = useRef<NodeJS.Timeout>();
 
@@ -41,15 +41,26 @@ export function useMCMETA(imageURL: string, mcmeta?: TextureMCMETA | null): MCME
 			animationInterval.current = undefined;
 		}
 
+		let __mcmeta: MCMETA;
+
 		// Short return if the mcmeta is not valid or not present
 		if (!mcmeta) return setValid(false);
-
-		setValid(true);
+		if (typeof mcmeta === 'string') {
+			try {
+				__mcmeta = JSON.parse(mcmeta);
+				setValid(true);
+			} catch {
+				return setValid(false);
+			}
+		} else {
+			__mcmeta = mcmeta;
+			setValid(true);
+		}
 
 		const image = new Image();
 		image.src = imageURL;
 
-		const tick = Math.max(mcmeta?.animation?.frametime || 1, 1);
+		const tick = Math.max(__mcmeta.animation.frametime || 1, 1);
 		const frames: Frame[] = [];
 
 		let interval: number;
@@ -60,41 +71,44 @@ export function useMCMETA(imageURL: string, mcmeta?: TextureMCMETA | null): MCME
 		const context = canvas.getContext('2d');
 		if (!context) return;
 
+		canvas.style.width = '100%';
+		canvas.width = canvas.offsetWidth;
+		canvas.height = canvas.offsetWidth;
+
 		const draw = (frame = 0, ticks = 0) => {
 			context.clearRect(0, 0, canvas.width, canvas.height);
 			context.globalAlpha = 1;
 			context.imageSmoothingEnabled = false;
 			context.drawImage(
 				image,
-				0, image.width * (frames[frame]?.index ?? 1),
-				image.width, image.width,
-				0, 0,
+				0,            image.width * frames[frame].index,
+				image.width,  image.width,
+				0,            0,
 				canvas.width, canvas.height
 			);
 
-			if (mcmeta?.animation?.interpolate) {
-				context.globalAlpha = ticks / (frames[frame]?.duration ?? 1);
+			if (__mcmeta.animation.interpolate) {
+				context.globalAlpha = ticks / frames[frame].duration;
 				context.drawImage(
 					image,
-					0, image.width * (frames[(frame + 1) % frames.length]?.index ?? 1),
-					image.width, image.width,
-					0, 0,
+					0,            image.width * frames[(frame + 1) % frames.length].index,
+					image.width,  image.width,
+					0,            0,
 					canvas.width,	canvas.height
 				);
 			}
 		};
 
 		image.onload = () => {
-			if (mcmeta?.animation?.frames && mcmeta?.animation.frames.length > 0) {
+			if (__mcmeta.animation.frames && __mcmeta.animation.frames.length > 0) {
 				interval =
-					mcmeta?.animation.interpolate ||
-					mcmeta?.animation.frames.find((e) => typeof e === 'object' && e.time % tick !== 0)
+					__mcmeta.animation.interpolate ||
+					__mcmeta.animation.frames.find((e) => typeof e === 'object' && e.time % tick !== 0)
 						? 1
 						: tick;
 
-				for (let e = 0; e < mcmeta?.animation.frames.length; e++) {
-					const a = mcmeta?.animation.frames[e]!;
-
+				for (let e = 0; e < __mcmeta.animation.frames.length; e++) {
+					const a = __mcmeta.animation.frames[e];
 					if (typeof a === 'object')
 						frames.push({
 							index: a.index,
@@ -107,7 +121,7 @@ export function useMCMETA(imageURL: string, mcmeta?: TextureMCMETA | null): MCME
 						});
 				}
 			} else {
-				interval = mcmeta?.animation?.interpolate ? 1 : tick;
+				interval = __mcmeta.animation.interpolate ? 1 : tick;
 				const e = image.height / image.width;
 				for (let a = 0; a < e; a++) frames.push({ index: a, duration: tick / interval });
 			}
@@ -118,18 +132,12 @@ export function useMCMETA(imageURL: string, mcmeta?: TextureMCMETA | null): MCME
 			const update = () => {
 				ticks++;
 
-				// update canvas size each frame to match the container size
-				// >> this is required if the canvas is first hidden and then shown
-				canvas.style.width = '100%';
-				canvas.width = canvas.offsetWidth;
-				canvas.height = canvas.offsetWidth;
-
-				if (frames[currentFrame]!.duration <= ticks) {
+				if (frames[currentFrame].duration <= ticks) {
 					ticks = 0;
 					currentFrame++;
 					if (currentFrame >= frames.length) currentFrame = 0;
 					draw(currentFrame);
-				} else if (mcmeta?.animation?.interpolate) draw(currentFrame, ticks);
+				} else if (__mcmeta.animation.interpolate) draw(currentFrame, ticks);
 			};
 
 			if (!animationInterval.current) {
diff --git a/src/hooks/use-previous.tsx b/src/hooks/use-previous.ts
similarity index 68%
rename from src/hooks/use-previous.tsx
rename to src/hooks/use-previous.ts
index c0a930a9..4159a0a3 100644
--- a/src/hooks/use-previous.tsx
+++ b/src/hooks/use-previous.ts
@@ -1,10 +1,9 @@
 import { useEffect, useRef } from 'react';
 
-export function usePrevious<T>(value: T): T | undefined {
+export const usePrevious = <T>(value: T): T | undefined => {
 	const ref = useRef<T>();
 	useEffect(() => {
 		ref.current = value;
 	});
-
 	return ref.current;
-}
+};
diff --git a/src/hooks/use-websocket.tsx b/src/hooks/use-websocket.tsx
index cb87cb20..da81dd55 100644
--- a/src/hooks/use-websocket.tsx
+++ b/src/hooks/use-websocket.tsx
@@ -3,6 +3,11 @@ import { useState } from 'react';
 import { useEffectOnce } from '~/hooks/use-effect-once';
 import { socket } from '~/lib/websocket';
 
+/**
+ * Hook to manage the websocket connection and watchers
+ * @param watchers List of watchers to attach to the websocket
+ * @returns The connection status and transport type
+ */
 export function useWebsocket(watchers: [string, (args: any) => void][]) {
 	const [isConnected, setIsConnected] = useState(false);
 	const [transport, setTransport] = useState('N/A');
diff --git a/src/server/actions/files.ts b/src/server/actions/files.ts
index 7d78eb15..88bf3a4f 100644
--- a/src/server/actions/files.ts
+++ b/src/server/actions/files.ts
@@ -14,7 +14,7 @@ import { calculateHash } from '~/lib/hash';
 import { socket } from '~/lib/serversocket';
 import { sortBySemver } from '~/lib/utils';
 
-import { uploadToRepository } from './git';
+import { addFile, commitAndPush } from './simple-git';
 import { createMod, updateModPicture } from '../data/mods';
 import { createModVersion } from '../data/mods-version';
 import { linkTextureToResource, createResource, getResource } from '../data/resource';
@@ -22,7 +22,7 @@ import { createTexture, findTexture } from '../data/texture';
 
 import type { ModVersion } from '@prisma/client';
 import type { CentralDirectory } from 'unzipper';
-import type { base64, MCModInfoData, ModData, ModFabricJson, ModFabricJsonPerson, ModsToml, SocketModUpload } from '~/types';
+import type { MCModInfoData, ModData, ModFabricJson, ModFabricJsonPerson, ModsToml, SocketModUpload } from '~/types';
 
 /**
  * Uploads a file to the server
@@ -302,12 +302,6 @@ export async function extractDefaultResourcePack(jar: File, modVersion: ModVersi
 
 	// TODO: Get models assets
 
-	const fileDirPrv = join(FILE_PATH, 'textures', 'default');
-	if (!existsSync(fileDirPrv)) mkdirSync(fileDirPrv, { recursive: true });
-
-	const filesToCommit: base64[] = [];
-	const filesNamesOnGit: string[] = [];
-
 	// Check if the extracted file already exists in the database
 	for (const textureAsset of textureAssets) {
 		const textureName = textureAsset.path.split('/').pop()!.split('.')[0] ?? 'unknown';
@@ -348,8 +342,7 @@ export async function extractDefaultResourcePack(jar: File, modVersion: ModVersi
 			const filepath = gitRawUrl({ orgOrUser: GITHUB_ORG_NAME, repository: GITHUB_DEFAULT_REPO_NAME, path: `${hash}.png` });
 			await db.texture.update({ where: { id: texture.id }, data: { filepath } });
 
-			filesToCommit.push(buffer.toString('base64') as base64);
-			filesNamesOnGit.push(`${hash}.png`);
+			await addFile(buffer, `${hash}.png`);
 		}
 		else {
 			if (texture.name !== textureName && !texture.aliases.includes(textureName)) {
@@ -369,13 +362,7 @@ export async function extractDefaultResourcePack(jar: File, modVersion: ModVersi
 	}
 
 	const mod = await db.mod.findFirstOrThrow({ where: { id: modVersion.modId } });
-
-	// push new files to git
-	await uploadToRepository(
-		filesToCommit,
-		filesNamesOnGit,
-		`textures: add default textures for ${mod.name} \`${modVersion.version}\``
-	);
+	await commitAndPush(`add: default textures for ${mod.name} \`${modVersion.version}\``);
 
 	return status;
 }
diff --git a/src/server/actions/git.ts b/src/server/actions/git.ts
deleted file mode 100644
index 7db5f200..00000000
--- a/src/server/actions/git.ts
+++ /dev/null
@@ -1,327 +0,0 @@
-'use server';
-import 'server-only';
-
-import { Octokit } from '@octokit/rest';
-import { Resolution, UserRole } from '@prisma/client';
-
-import { auth } from '~/auth';
-import { canAccess } from '~/lib/auth';
-import { gitRawUrl, GITHUB_DEFAULT_REPO_NAME, GITHUB_ORG_NAME } from '~/lib/constants';
-import { db } from '~/lib/db';
-
-import type { RestEndpointMethodTypes } from '@octokit/rest';
-import type { RawUrl } from '~/lib/constants';
-import type { base64 } from '~/types';
-
-// Singleton instance of octokit
-
-declare global {
-  var octokit: Octokit | undefined;
-}
-
-let octokit = globalThis.octokit || undefined;
-if (process.env.NODE_ENV !== 'production') globalThis.octokit = octokit;
-
-async function getOctokit() {
-	if (octokit) return octokit;
-
-	const session = await auth();
-	const user = session?.user!; // We know the user is logged in because of the canAccess check
-
-	// Authenticate with GitHub API using current logged user's access token
-	const userToken = await db.account.findFirstOrThrow({ where: { userId: user.id }, select: { access_token: true } });
-	octokit = new Octokit({
-		auth: userToken.access_token,
-	});
-
-	return octokit;
-}
-
-// --- End singletons ---
-
-/**
- * Check if the user has a fork of the default repository
- */
-export async function getFork() {
-	const octokit = await getOctokit();
-	const username = await getUserGitHubUsername();
-
-	let fork: RestEndpointMethodTypes['repos']['get']['response'];
-	try {
-		fork = await octokit.repos.get({
-			owner: username,
-			repo: GITHUB_DEFAULT_REPO_NAME,
-		});
-	} catch {
-		return null;
-	}
-
-	return fork.data.html_url;
-}
-
-/**
- * Delete the forked repository from the logged user's account
- */
-export async function deleteFork() {
-	const octokit = await getOctokit();
-	const username = await getUserGitHubUsername();
-
-	await octokit.repos.delete({
-		owner: username,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-	});
-}
-
-/**
- * Fork the default textures repository to the user's account and wait for the fork to be ready
- */
-export async function forkRepository() {
-	const octokit = await getOctokit();
-
-	// Fork the repository
-	await octokit.repos.createFork({
-		owner: GITHUB_ORG_NAME,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-	});
-
-	let forkReady = false;
-	const username = await getUserGitHubUsername();
-
-	// wait for the fork to be ready before doing anything else
-	while (!forkReady) {
-		const fork = await octokit.repos.get({
-			owner: username,
-			repo: GITHUB_DEFAULT_REPO_NAME,
-		});
-
-		if (fork.status === 200) forkReady = true;
-
-		await new Promise((resolve) => setTimeout(resolve, 5000));
-	}
-
-	// create empty branches for each resolution
-	const resolutions = Object.keys(Resolution) as Resolution[];
-	const SHA1_EMPTY_TREE = '4b825dc642cb6eb9a060e54bf8d69288fbee4904'; // see https://github.com/orgs/community/discussions/24699
-
-	const res = await octokit.request('POST /repos/{owner}/{repo}/git/commits', {
-		owner: username,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-		message: 'initial commit',
-		tree: SHA1_EMPTY_TREE,
-		parents: [],
-	});
-
-	for (const resolution of resolutions) {
-		await octokit.request('POST /repos/{owner}/{repo}/git/refs', {
-			owner: username,
-			repo: GITHUB_DEFAULT_REPO_NAME,
-			ref: `refs/heads/${resolution}`,
-			sha: res.data.sha,
-		});
-	}
-
-	// set x32 as default branch and delete main (x16) as it's not needed
-	await setDefaultBranch(username, GITHUB_DEFAULT_REPO_NAME, 'x32');
-	await deleteBranch(username, GITHUB_DEFAULT_REPO_NAME, 'main');
-}
-
-/**
- * Upload the given files to the default textures repository
- * @param files the files to upload as base64
- * @param filenames the names of the files (must match the order of the files)
- * @param commitMessage the commit message to use
- */
-export async function uploadToRepository(files: base64[], filenames: string[], commitMessage: string): Promise<void> {
-	await canAccess(UserRole.COUNCIL);
-
-	// get latest commit
-	const currentCommit = await getCurrentCommit('main');
-
-	// create blobs for each file
-	const blobs = await Promise.all(files.map((file) => createBlobFile(file)));
-
-	// create new tree with the blobs
-	const newTree = await createNewTree({ filenames, blobs, parentTreeSha: currentCommit.tree_sha });
-
-	// create a new commit with the new tree
-	const newCommit = await createCommit({ message: commitMessage, treeSha: newTree.sha, parentCommitSha: currentCommit.commit_sha });
-
-	// update the branch to point to the new commit
-	await setBranchToCommit(newCommit.sha, 'main');
-}
-
-export interface GitFile {
-	url: RawUrl;
-	path: string;
-	mode: string;
-	type: string;
-	sha: string;
-	size: number;
-}
-
-export async function getContributionsOfFork(resolution: Resolution): Promise<GitFile[]> {
-	const username = await getUserGitHubUsername();
-	const files = await listFilesInBranch(username, GITHUB_DEFAULT_REPO_NAME, resolution);
-
-	return files as GitFile[];
-}
-
-async function listFilesInBranch(owner: string, repo: string, branch: string) {
-	const octokit = await getOctokit();
-	const { data } = await octokit.git.getRef({
-		owner,
-		repo,
-		ref: `heads/${branch}`,
-	});
-
-	const commitSha = data.object.sha;
-
-	// Get the tree structure of the commit
-	try {
-		const treeResponse = await octokit.git.getTree({
-			owner,
-			repo,
-			tree_sha: commitSha,
-			recursive: 'true', // Set to "true" to list all files recursively
-		});
-
-		return treeResponse.data.tree
-			.filter((item) => item.type === 'blob')
-			.map((item) => ({
-				...item,
-				url: gitRawUrl({ orgOrUser: owner, repository: repo, branchOrCommit: commitSha, path: item.path }),
-			}));
-	}
-	catch {
-		return [];
-	}
-
-}
-
-/**
- * Get the GitHub username of the currently logged user
- */
-async function getUserGitHubUsername() {
-	const octokit = await getOctokit();
-	const { data } = await octokit.users.getAuthenticated();
-	return data.login;
-}
-
-async function setDefaultBranch(owner: string, repo: string, branch: string) {
-	const octokit = await getOctokit();
-	await octokit.repos.update({
-		owner,
-		repo,
-		default_branch: branch,
-	});
-}
-
-async function deleteBranch(owner: string, repo: string, branch: string) {
-	const octokit = await getOctokit();
-	await octokit.git.deleteRef({
-		owner,
-		repo,
-		ref: `heads/${branch}`,
-	});
-}
-
-async function setBranchToCommit(commitSha: string, branch: string) {
-	const octokit = await getOctokit();
-	await octokit.git.updateRef({
-		owner: GITHUB_ORG_NAME,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-		ref: `heads/${branch}`,
-		sha: commitSha,
-	});
-}
-
-interface CreateCommitOptions {
-	message: string;
-	treeSha: string;
-	parentCommitSha?: string;
-	owner?: string;
-	repo?: string;
-}
-
-async function createCommit({ message, treeSha, parentCommitSha, owner, repo }: CreateCommitOptions) {
-	const octokit = await getOctokit();
-	const { data } = await octokit.git.createCommit({
-		owner: owner ?? GITHUB_ORG_NAME,
-		repo: repo ?? GITHUB_DEFAULT_REPO_NAME,
-		message,
-		tree: treeSha,
-		parents: parentCommitSha ? [parentCommitSha] : [],
-	});
-
-	return data;
-}
-
-interface CreateNewTreeOptions {
-	filenames: string[],
-	blobs: { url: string, sha: string }[],
-	parentTreeSha: string
-	owner?: string;
-	repo?: string;
-}
-
-/**
- * Create a new tree with the given blobs
- */
-async function createNewTree({ filenames, blobs, parentTreeSha, owner, repo }: CreateNewTreeOptions) {
-	const octokit = await getOctokit();
-	const tree = blobs.map(({ sha }, index) => {
-		return {
-			path: filenames[index],
-			mode: '100644',
-			type: 'blob',
-			sha,
-		} as const;
-	});
-
-	const { data } = await octokit.git.createTree({
-		owner: owner ?? GITHUB_ORG_NAME,
-		repo: repo ?? GITHUB_DEFAULT_REPO_NAME,
-		base_tree: parentTreeSha,
-		tree,
-	});
-
-	return data;
-}
-
-/**
- * Prepare a github blob for a file
- */
-async function createBlobFile(file: base64) {
-	const octokit = await getOctokit();
-	const blobData = await octokit.git.createBlob({
-		owner: GITHUB_ORG_NAME,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-		content: file,
-		encoding: 'base64',
-	});
-
-	return blobData.data;
-}
-
-/**
- * Fetch the current commit of the given repository and branch
- */
-async function getCurrentCommit(branch: string) {
-	const octokit = await getOctokit();
-	const { data: refData } = await octokit.git.getRef({
-		owner: GITHUB_ORG_NAME,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-		ref: `heads/${branch}`,
-	});
-
-	const { data: commitData } = await octokit.git.getCommit({
-		owner: GITHUB_ORG_NAME,
-		repo: GITHUB_DEFAULT_REPO_NAME,
-		commit_sha: refData.object.sha,
-	});
-
-	return {
-		commit_sha: commitData.sha,
-		tree_sha: commitData.tree.sha,
-	};
-}
diff --git a/src/server/actions/octokit.ts b/src/server/actions/octokit.ts
new file mode 100644
index 00000000..f53a2f7f
--- /dev/null
+++ b/src/server/actions/octokit.ts
@@ -0,0 +1,189 @@
+'use server';
+import 'server-only';
+
+import { Octokit } from '@octokit/rest';
+import { Resolution } from '@prisma/client';
+
+import { auth } from '~/auth';
+import { gitRawUrl, GITHUB_DEFAULT_REPO_NAME, GITHUB_ORG_NAME } from '~/lib/constants';
+import { db } from '~/lib/db';
+
+import type { RestEndpointMethodTypes } from '@octokit/rest';
+import type { RawUrl } from '~/lib/constants';
+
+/**
+ * Get an authenticated Octokit instance
+ */
+export async function getOctokit(): Promise<Octokit> {
+	const session = await auth();
+	const user = session?.user;
+
+	if (!user) throw new Error('No user logged in');
+	const userAccount = await db.account.findFirstOrThrow({ where: { userId: user.id }, select: { access_token: true } });
+
+	const octokit = new Octokit({
+		auth: userAccount.access_token,
+	});
+
+	return octokit;
+}
+
+/**
+ * Get the URL of the forked repository from the logged user's account or null if it doesn't exist
+ */
+export async function getFork() {
+	const octokit = await getOctokit();
+	const username = await getUserGitHubUsername(octokit);
+
+	let fork: RestEndpointMethodTypes['repos']['get']['response'];
+	try {
+		fork = await octokit.repos.get({
+			owner: username,
+			repo: GITHUB_DEFAULT_REPO_NAME,
+		});
+	} catch {
+		return null;
+	}
+
+	return fork.data.html_url;
+}
+
+/**
+ * Delete the forked repository from the logged user's account
+ */
+export async function deleteFork() {
+	const octokit = await getOctokit();
+	const username = await getUserGitHubUsername(octokit);
+
+	await octokit.repos.delete({
+		owner: username,
+		repo: GITHUB_DEFAULT_REPO_NAME,
+	});
+}
+
+/**
+ * Fork the default textures repository to the user's account,
+ * create empty branches for each resolution and set x32 as the default branch
+ */
+export async function forkRepository() {
+	const octokit = await getOctokit();
+
+	// Fork the repository
+	await octokit.repos.createFork({
+		owner: GITHUB_ORG_NAME,
+		repo: GITHUB_DEFAULT_REPO_NAME,
+	});
+
+	let forkReady = false;
+	const username = await getUserGitHubUsername(octokit);
+
+	// wait for the fork to be ready before doing anything else
+	while (!forkReady) {
+		const fork = await octokit.repos.get({
+			owner: username,
+			repo: GITHUB_DEFAULT_REPO_NAME,
+		});
+
+		if (fork.status === 200) forkReady = true;
+
+		await new Promise((resolve) => setTimeout(resolve, 5000));
+	}
+
+	// create empty branches for each resolution
+	const resolutions = Object.keys(Resolution) as Resolution[];
+	const SHA1_EMPTY_TREE = '4b825dc642cb6eb9a060e54bf8d69288fbee4904'; // see https://github.com/orgs/community/discussions/24699
+
+	const res = await octokit.request('POST /repos/{owner}/{repo}/git/commits', {
+		owner: username,
+		repo: GITHUB_DEFAULT_REPO_NAME,
+		message: 'initial commit',
+		tree: SHA1_EMPTY_TREE,
+		parents: [],
+	});
+
+	for (const resolution of resolutions) {
+		await octokit.request('POST /repos/{owner}/{repo}/git/refs', {
+			owner: username,
+			repo: GITHUB_DEFAULT_REPO_NAME,
+			ref: `refs/heads/${resolution}`,
+			sha: res.data.sha,
+		});
+	}
+
+	// set x32 as default branch and delete main (x16) as it's not needed
+	await octokit.repos.update({
+		owner: username,
+		repo: GITHUB_DEFAULT_REPO_NAME,
+		default_branch: 'x32',
+	});
+
+	// delete main branch (x16 resolution) from the fork
+	await octokit.git.deleteRef({
+		owner: username,
+		repo:GITHUB_DEFAULT_REPO_NAME,
+		ref: 'heads/main',
+	});
+}
+
+export interface GitFile {
+	url: RawUrl;
+	path: string;
+	mode: string;
+	type: string;
+	sha: string;
+	size: number;
+}
+
+/**
+ * Retrieve the list of files in the forked repository for a specific resolution (branch)
+ */
+export async function getContributionsOfFork(resolution: Resolution): Promise<GitFile[]> {
+	const octokit = await getOctokit();
+	const username = await getUserGitHubUsername(octokit);
+	const files = await listFilesInBranch(username, GITHUB_DEFAULT_REPO_NAME, resolution);
+
+	return files as GitFile[];
+}
+
+/**
+ * Get the list of files in a branch
+ */
+async function listFilesInBranch(owner: string, repo: string, branch: string) {
+	const octokit = await getOctokit();
+	const { data } = await octokit.git.getRef({
+		owner,
+		repo,
+		ref: `heads/${branch}`,
+	});
+
+	const commitSha = data.object.sha;
+
+	// Get the tree structure of the commit
+	try {
+		const treeResponse = await octokit.git.getTree({
+			owner,
+			repo,
+			tree_sha: commitSha,
+			recursive: 'true', // Set to "true" to list all files recursively
+		});
+
+		return treeResponse.data.tree
+			.filter((item) => item.type === 'blob')
+			.map((item) => ({
+				...item,
+				url: gitRawUrl({ orgOrUser: owner, repository: repo, branchOrCommit: commitSha, path: item.path }),
+			}));
+	}
+	catch {
+		return [];
+	}
+
+}
+
+/**
+ * Get the GitHub username of the currently logged user
+ */
+export async function getUserGitHubUsername(octokit: Octokit) {
+	const { data } = await octokit.users.getAuthenticated();
+	return data.login;
+}
diff --git a/src/server/actions/simple-git.ts b/src/server/actions/simple-git.ts
new file mode 100644
index 00000000..263ad60a
--- /dev/null
+++ b/src/server/actions/simple-git.ts
@@ -0,0 +1,79 @@
+'use server';
+import 'server-only';
+
+import { existsSync, readdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+import simpleGit from 'simple-git';
+
+import { auth } from '~/auth';
+import { GITHUB_DEFAULT_REPO_NAME, GITHUB_ORG_NAME } from '~/lib/constants';
+import { db } from '~/lib/db';
+
+import { getOctokit, getUserGitHubUsername } from './octokit';
+
+const REMOTE_REPOSITORY_URL = `https://github.com/${GITHUB_ORG_NAME}/${GITHUB_DEFAULT_REPO_NAME}.git` as const;
+const LOCAL_REPOSITORY_PATH = process.env.NODE_ENV === 'production'
+	? '/var/www/html/data.faithfulmods.net/textures/'
+	: process.env.DEV_LOCAL_REPOSITORY_PATH!;
+
+const git = simpleGit(LOCAL_REPOSITORY_PATH);
+
+/**
+ * Get the default-textures(-dev) repository URL with the user's access token
+ */
+async function remoteUrl() {
+	const session = await auth();
+	const user = session?.user;
+	if (!user) throw new Error('No user logged in');
+
+	// Get user token using current logged user
+	const userAccount = await db.account.findFirstOrThrow({ where: { userId: user.id }, select: { access_token: true } });
+
+	const octokit = await getOctokit();
+	const username = await getUserGitHubUsername(octokit);
+
+	return `https://${username}:${userAccount.access_token}@github.com/${GITHUB_ORG_NAME}/${GITHUB_DEFAULT_REPO_NAME}.git`;
+};
+
+/**
+ * Add a file to the local repository
+ * @param file the file to add
+ * @param filename the name of the file
+ */
+export async function addFile(file: Buffer, filename: string) {
+	if (readdirSync(LOCAL_REPOSITORY_PATH).length === 0) {
+		await git.clone(REMOTE_REPOSITORY_URL, LOCAL_REPOSITORY_PATH);
+		await git.pull();
+	}
+
+	const filepath = join(LOCAL_REPOSITORY_PATH, filename);
+	writeFileSync(filepath, file);
+
+	await git.add(filepath);
+}
+
+/**
+ * Delete a file from the local repository
+ * @param filename the name of the file
+ */
+export async function deleteFile(filename: string) {
+	if (readdirSync(LOCAL_REPOSITORY_PATH).length === 0) {
+		await git.clone(REMOTE_REPOSITORY_URL, LOCAL_REPOSITORY_PATH);
+		await git.pull();
+	}
+
+	const filepath = join(LOCAL_REPOSITORY_PATH, filename);
+	if (existsSync(filepath)) await git.rm(filepath);
+}
+
+/**
+ * Commit and push the changes to the remote repository
+ * @param message the commit message
+ */
+export async function commitAndPush(message: string) {
+	const remote = await remoteUrl();
+
+	await git.commit(message);
+	await git.push(remote, 'main');
+}
diff --git a/src/server/data/contributions.ts b/src/server/data/contributions.ts
index a4944528..af7191f5 100644
--- a/src/server/data/contributions.ts
+++ b/src/server/data/contributions.ts
@@ -8,8 +8,8 @@ import { db } from '~/lib/db';
 
 import { getCounselors } from './user';
 
-import type { GitFile } from '../actions/git';
-import type { Contribution, Resolution } from '@prisma/client';
+import type { GitFile } from '../actions/octokit';
+import type { Contribution, Poll, Resolution } from '@prisma/client';
 import type { Prettify, PublicUser } from '~/types';
 
 // GET
@@ -43,7 +43,7 @@ export type GetPendingContributions = Prettify<Omit<Contribution, 'status'> & {
 	status: typeof Status.PENDING,
 	coAuthors: PublicUser[],
 	owner: PublicUser,
-	poll: {
+	poll: Poll & {
 		upvotes: PublicUser[],
 		downvotes: PublicUser[],
 	}
diff --git a/src/server/data/mods-version.ts b/src/server/data/mods-version.ts
index b10e130d..0ec80fa3 100644
--- a/src/server/data/mods-version.ts
+++ b/src/server/data/mods-version.ts
@@ -13,6 +13,7 @@ import { removeModFromModpackVersion } from './modpacks-version';
 import { deleteResource } from './resource';
 import { isVanillaTextureContributed } from '../actions/faithful-pack';
 import { extractModVersionsFromJAR } from '../actions/files';
+import { commitAndPush } from '../actions/simple-git';
 
 import type { ModVersion, Modpack } from '@prisma/client';
 import type { ModVersionExtended, Progression, SocketModUpload } from '~/types';
@@ -225,5 +226,8 @@ export async function deleteModVersion(id: string): Promise<ModVersion> {
 		await deleteResource(resource.id);
 	}
 
+	const modVersion = await db.modVersion.findFirstOrThrow({ where: { id }, include: { mod: true } });
+	await commitAndPush(`delete: default textures for ${modVersion?.mod.name} \`${modVersion.version}\``);
+
 	return db.modVersion.delete({ where: { id } });
 }
diff --git a/src/server/data/texture.ts b/src/server/data/texture.ts
index 1c9479a6..f4536ee4 100644
--- a/src/server/data/texture.ts
+++ b/src/server/data/texture.ts
@@ -6,7 +6,7 @@ import { Resolution, Status, UserRole } from '@prisma/client';
 import { canAccess } from '~/lib/auth';
 import { db } from '~/lib/db';
 
-import { remove } from '../actions/files';
+import { deleteFile } from '../actions/simple-git';
 
 import type { ContributionDeactivation, Texture } from '@prisma/client';
 import type { ContributionActivationStatus, Prettify, Progression, TextureMCMETA } from '~/types';
@@ -224,9 +224,8 @@ export async function deleteTexture(id: number): Promise<Texture> {
 	await canAccess(UserRole.COUNCIL);
 
 	// Delete on disk
-	// @deprecated (moved to git repository)
-	const textureFile = await db.texture.findUnique({ where: { id } }).then((texture) => texture?.filepath);
-	if (textureFile) await remove(textureFile as `/files/${string}`);
+	const texture = await db.texture.findUnique({ where: { id } });
+	if (texture) await deleteFile(`${texture.hash}.png`);
 
 	// Contributions
 	await db.contributionDeactivation.deleteMany({ where: { textureId: id } });
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 08fdc16d..158665df 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -67,50 +67,8 @@ export type Progression = {
 	};
 }
 
-export interface AnimationMCMETA {
-	frametime?: number;
-	interpolate?: boolean;
-	frames?: (number | { index: number; time: number })[];
-	height?: number;
-	width?: number;
-}
-
-export interface PropertiesMCMETA {
-	blur?: boolean;
-	clamp?: boolean;
-	mipmaps?: number[];
-}
-
-export interface GuiMCMETA {
-	scaling?: {
-		type?: 'stretch' | 'tile' | 'nine_slice';
-		width?: number;
-		height?: number;
-		border?: number | {
-			left?: number;
-			top?: number;
-			right?: number;
-			bottom?: number;
-		}
-	}
-}
-
-export interface VillagerMCMETA {
-	hat?: 'full' | 'partial';
-}
-
 export type Downloads = Record<Resolution, number | undefined>;
 
-export interface TextureMCMETA {
-	animation?: AnimationMCMETA;
-	texture?: PropertiesMCMETA;
-	gui?: GuiMCMETA;
-	villager?: VillagerMCMETA;
-}
-
-// TODO: Add more properties
-export interface PackMCMETA {}
-
 export type ReportWithReporter = Report & { reporter: PublicUser };
 export type UserWithReports = Prettify<User & { reports: Report[] }>;
 
diff --git a/src/types/prisma.d.ts b/src/types/prisma.d.ts
index 01c94eac..c58d7051 100644
--- a/src/types/prisma.d.ts
+++ b/src/types/prisma.d.ts
@@ -1,9 +1,10 @@
-import type { TextureMCMETA, Downloads, FPStoredContributions } from '.';
+import type { Downloads, FPStoredContributions } from '.';
+import type { TextureMCMeta } from 'react-minecraft';
 
 declare global {
 	namespace PrismaJson {
-		type TextureMCMETAType = TextureMCMETA;
-		type ContributionMCMETAType = TextureMCMETA;
+		type TextureMCMETAType = TextureMCMeta;
+		type ContributionMCMETAType = TextureMCMeta;
 		type ModVersionDownloadsType = Downloads;
 		type FaithfulCachedContributionsType = FPStoredContributions;
 	}