diff --git a/popup/components/NavigationBar/index.tsx b/popup/components/NavigationBar/index.tsx
index 2cc22e5..268c7db 100644
--- a/popup/components/NavigationBar/index.tsx
+++ b/popup/components/NavigationBar/index.tsx
@@ -21,7 +21,6 @@ type InputProps = {
   marginLeft: string
 }
 
-
 const NavBarContainer = styled.div`
   display: flex;
   flex-direction: row;
diff --git a/popup/images/dyslens-gif-feat.gif b/popup/images/dyslens-gif-feat.gif
new file mode 100644
index 0000000..271c799
Binary files /dev/null and b/popup/images/dyslens-gif-feat.gif differ
diff --git a/popup/pages/TextToSpeech/index.tsx b/popup/pages/TextToSpeech/index.tsx
index 45d584a..2b7cded 100644
--- a/popup/pages/TextToSpeech/index.tsx
+++ b/popup/pages/TextToSpeech/index.tsx
@@ -1,10 +1,17 @@
 import { Slider, Switch } from "@mui/material";
 import { ChangeEvent, useContext, useEffect, useState } from "react";
+import styled from "styled-components";
 
 
 import StoreContext from "~popup/storage/StoreContext";
 import ComponentContainer from "~popup/components/ComponentContainer";
 import DropDown from "~popup/components/DropDown";
+import imageGif from "./../../images/dyslens-gif-feat.gif";
+
+
+const StyledGifImage = styled.img`
+  width: 100%;
+`;
 
 export default function TextToSpeech() {
     const { appData, setAppState } = useContext(StoreContext);
@@ -88,6 +95,9 @@ export default function TextToSpeech() {
     }
 
     return <div>
+        <ComponentContainer label="How to use">
+            <StyledGifImage data-testid="image-gif" src={imageGif} alt="dyslensGifFeature" />
+        </ComponentContainer>
         <ComponentContainer label="Enabled" horizontal>
             <Switch
                 checked={appData.textToSpeech.enabled}