diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 552748e..8eaaedd 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -1,3 +1,6 @@
+# 0.0.9
+- fixed issue of not opening features with /%# in names
+
 # 0.0.8
 - added capability to attach cucumber logs
 
diff --git a/package-lock.json b/package-lock.json
index c3d3378..a9191e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@qavajs/html-formatter",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@qavajs/html-formatter",
-      "version": "0.0.8",
+      "version": "0.0.9",
       "devDependencies": {
         "@babel/core": "^7.21.0",
         "@cucumber/cucumber": "^9.0.0",
diff --git a/package.json b/package.json
index 05f072c..00177c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qavajs/html-formatter",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "formatter/formatter.js",
   "scripts": {
     "report:compile": "node test/compile_report.js",
diff --git a/src/index.tsx b/src/index.tsx
index d5f2eeb..f01b191 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,7 +29,7 @@ window.metadata = Object.entries(window.metaSourceData ?? {})
 const data = window.sourceData
     .map((feature: any, index: number) => ({
         ...feature,
-        id: feature.id + index,
+        id: feature.id.replace(/[/#%]/g, 'x') + index,
         total: feature.elements.length,
         elements: feature.elements.map((scenario: any) => ({
             ...scenario,
diff --git a/test/features/FeatureWithUnsuportedChars.feature b/test/features/FeatureWithUnsuportedChars.feature
new file mode 100644
index 0000000..9e3b697
--- /dev/null
+++ b/test/features/FeatureWithUnsuportedChars.feature
@@ -0,0 +1,7 @@
+Feature: Feature Name with / slash
+
+  Background:
+    Given background
+
+  Scenario: scenario passed with / slash
+    When passed step