diff --git a/src/index.css b/src/index.css
index 0837a6d..5ee04d8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -242,6 +242,44 @@ body {
     left: -5px;
 }
 
+/* Adding file Path for each snippetView */
+
+.snippetDiv .file-path {
+    color: darkgray;
+    text-align: right;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: min(33%, 300px);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 5px;
+    background-color: rgba(240, 240, 240, 0.8);
+    transition: color 0.3s ease;
+    direction: rtl;
+    text-align: left;
+}
+.snippetDiv .file-path:hover {
+    color: black;
+}
+.snippetDiv .full-path {
+    display: none;
+    position: absolute;
+    top: 20px;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 5px;
+    font-size: 12px;
+    z-index: 1000;
+    white-space: nowrap;
+}
+.snippetDiv .file-path:hover + .full-path {
+    display: block;
+}
+
 /*!*** Auto Complete ***!*/
 
 .monacoWrapper {
diff --git a/src/ui/rulePanel.js b/src/ui/rulePanel.js
index 55aa003..6ac2475 100644
--- a/src/ui/rulePanel.js
+++ b/src/ui/rulePanel.js
@@ -512,6 +512,12 @@ class SnippetView extends Component {
             <section>
                 <div data-file-path={this.state.d.filePath} className="snippetDiv"
                     style={{position: "relative"}}>
+                    <div className="file-path">
+                        {this.state.d.filePath}
+                    </div>
+                    <div className="full-path">
+                        {this.state.d.filePath}
+                    </div>
                     <div className="link" onClick={() => {
                         this.props.onIgnoreFile(true);
                         Utilities.sendToServer(this.props.ws, webSocketSendMessage.snippet_xml_msg,