diff --git a/package.json b/package.json
index 7c1bd24a..5a10f2bd 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
+    "apache-md5": "^1.1.8",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8f774d0d..dc35c32d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ dependencies:
   '@vueuse/router':
     specifier: ^10.0.0
     version: 10.0.0(vue-router@4.1.6)(vue@3.3.4)
+  apache-md5:
+    specifier: ^1.1.8
+    version: 1.1.8
   bcryptjs:
     specifier: ^2.4.3
     version: 2.4.3
@@ -3378,7 +3381,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.8.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4020,10 +4023,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+  /@vueuse/shared@10.8.0(vue@3.3.4):
+    resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4129,6 +4132,11 @@ packages:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  /apache-md5@1.1.8:
+    resolution: {integrity: sha512-FCAJojipPn0bXjuEpjOOOMN8FZDkxfWWp4JGN9mifU2IhxvKyXZYqpzPHdnTSUpmPDy+tsslB6Z1g+Vg6nVbYA==}
+    engines: {node: '>=8'}
+    dev: false
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -9752,8 +9760,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+  /vue-demi@0.14.7(vue@3.3.4):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
diff --git a/src/tools/htpasswd-generator/htpasswd-generator.vue b/src/tools/htpasswd-generator/htpasswd-generator.vue
new file mode 100644
index 00000000..6638db22
--- /dev/null
+++ b/src/tools/htpasswd-generator/htpasswd-generator.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { hashSync } from 'bcryptjs';
+import md5 from 'apache-md5';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const username = ref('');
+const password = ref('');
+const hashMethod = ref('bcrypt');
+
+const htpasswd = computed(() => {
+  if (username.value === '' || password.value === '') {
+    return '# username and password must not be empty';
+  }
+  let hash;
+  if (hashMethod.value === 'md5') {
+    hash = md5(password.value);
+  }
+  else {
+    hash = hashSync(password.value, 10);
+  }
+  return `${username.value}:${hash}`;
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="username"
+      label="Username"
+      placeholder="Your username..."
+      clearable raw-text mb-5
+    />
+    <c-input-text
+      v-model:value="password"
+      label="Password"
+      placeholder="Your password..."
+      clearable
+      raw-text
+      mb-2
+      type="password"
+    />
+
+    <c-select
+      v-model:value="hashMethod"
+      label="Hash method:"
+      :options="['bcrypt', 'md5']"
+    />
+
+    <n-divider />
+
+    <n-form-item label="htpasswd content:">
+      <TextareaCopyable :value="htpasswd" />
+    </n-form-item>
+  </div>
+</template>
diff --git a/src/tools/htpasswd-generator/index.ts b/src/tools/htpasswd-generator/index.ts
new file mode 100644
index 00000000..0559d546
--- /dev/null
+++ b/src/tools/htpasswd-generator/index.ts
@@ -0,0 +1,12 @@
+import { PasswordRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Htpasswd/htaccess generator',
+  path: '/htpasswd-generator',
+  description: 'htpassword/htaccess user/password generator',
+  keywords: ['htpasswd', 'htaccess', 'bcrypt', 'password'],
+  component: () => import('./htpasswd-generator.vue'),
+  icon: PasswordRound,
+  createdAt: new Date('2024-02-20'),
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 2a477ed2..66e236fc 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as textToUnicode } from './text-to-unicode';
+import { tool as htpasswdGenerator } from './htpasswd-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -113,6 +114,7 @@ export const toolsByCategory: ToolCategory[] = [
       urlParser,
       deviceInformation,
       basicAuthGenerator,
+      htpasswdGenerator,
       metaTagGenerator,
       otpCodeGeneratorAndValidator,
       mimeTypes,