diff --git a/doc/user/project/merge_requests/code_quality.md b/doc/user/project/merge_requests/code_quality.md
index 3a409bab19d..3c6b660c63d 100644
--- a/doc/user/project/merge_requests/code_quality.md
+++ b/doc/user/project/merge_requests/code_quality.md
@@ -5,8 +5,7 @@ disqus_identifier: 'https://docs.gitlab.com/ee/user/project/merge_requests/code_
 
 # Code Quality **(STARTER)**
 
-> [Introduced](https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1984)
-in [GitLab Starter](https://about.gitlab.com/pricing/) 9.3.
+> [Introduced](https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/1984) in [GitLab Starter](https://about.gitlab.com/pricing/) 9.3.
 
 With the help of [GitLab CI/CD](../../../ci/README.md), you can analyze your
 source code quality using GitLab Code Quality.
@@ -26,7 +25,7 @@ Code Quality:
 Going a step further, GitLab can show the Code Quality report right
 in the merge request widget area:
 
-![Code Quality Widget](img/code_quality.gif)
+![Code Quality Widget](img/code_quality.png)
 
 ## Use cases
 
diff --git a/doc/user/project/merge_requests/img/code_quality.gif b/doc/user/project/merge_requests/img/code_quality.gif
deleted file mode 100644
index 42f24b076b7..00000000000
Binary files a/doc/user/project/merge_requests/img/code_quality.gif and /dev/null differ
diff --git a/doc/user/project/merge_requests/img/code_quality.png b/doc/user/project/merge_requests/img/code_quality.png
new file mode 100644
index 00000000000..a20f6476fb8
Binary files /dev/null and b/doc/user/project/merge_requests/img/code_quality.png differ