diff --git a/gradle/changelog/usebranch_encoding.yaml b/gradle/changelog/usebranch_encoding.yaml
new file mode 100644
index 0000000000..0bcf5b9f2f
--- /dev/null
+++ b/gradle/changelog/usebranch_encoding.yaml
@@ -0,0 +1,2 @@
+- type: Fixed
+  description: Missing encoding of useBranch api ([#1798](https://github.com/scm-manager/scm-manager/pull/1798))
diff --git a/scm-ui/ui-api/src/branches.test.ts b/scm-ui/ui-api/src/branches.test.ts
index 8acbadf397..3c11568c62 100644
--- a/scm-ui/ui-api/src/branches.test.ts
+++ b/scm-ui/ui-api/src/branches.test.ts
@@ -51,6 +51,16 @@ describe("Test branches hooks", () => {
     },
   };
 
+  const feature: Branch = {
+    name: "feature/something-special",
+    revision: "42",
+    _links: {
+      delete: {
+        href: "/hog/branches/feature%2Fsomething-special",
+      },
+    },
+  };
+
   const branches: BranchCollection = {
     _embedded: {
       branches: [develop],
@@ -101,10 +111,10 @@ describe("Test branches hooks", () => {
   });
 
   describe("useBranch tests", () => {
-    const fetchBranch = async () => {
-      fetchMock.getOnce("/api/v2/hog/branches/develop", develop);
+    const fetchBranch = async (name: string, branch: Branch) => {
+      fetchMock.getOnce("/api/v2/hog/branches/" + encodeURIComponent(name), branch);
 
-      const { result, waitFor } = renderHook(() => useBranch(repository, "develop"), {
+      const { result, waitFor } = renderHook(() => useBranch(repository, name), {
         wrapper: createWrapper(undefined, queryClient),
       });
 
@@ -118,9 +128,14 @@ describe("Test branches hooks", () => {
     };
 
     it("should return branch", async () => {
-      const branch = await fetchBranch();
+      const branch = await fetchBranch("develop", develop);
       expect(branch).toEqual(develop);
     });
+
+    it("should escape branch name", async () => {
+      const branch = await fetchBranch("feature/something-special", feature);
+      expect(branch).toEqual(feature);
+    });
   });
 
   describe("useCreateBranch tests", () => {
diff --git a/scm-ui/ui-api/src/branches.ts b/scm-ui/ui-api/src/branches.ts
index b5650e43de..5e1cff3541 100644
--- a/scm-ui/ui-api/src/branches.ts
+++ b/scm-ui/ui-api/src/branches.ts
@@ -43,7 +43,7 @@ export const useBranches = (repository: Repository): ApiResult<BranchCollection>
 export const useBranch = (repository: Repository, name: string): ApiResult<Branch> => {
   const link = requiredLink(repository, "branches");
   return useQuery<Branch, Error>(branchQueryKey(repository, name), () =>
-    apiClient.get(concat(link, name)).then((response) => response.json())
+    apiClient.get(concat(link, encodeURIComponent(name))).then((response) => response.json())
   );
 };
 
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx
index 9a5921e3ce..5c017ec85f 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/BranchRoot.tsx
@@ -39,7 +39,7 @@ type Params = {
 
 const BranchRoot: FC<Props> = ({ repository }) => {
   const match = useRouteMatch<Params>();
-  const { isLoading, error, data: branch } = useBranch(repository, match.params.branch);
+  const { isLoading, error, data: branch } = useBranch(repository, decodeURIComponent(match.params.branch));
   const location = useLocation();
 
   if (isLoading) {