diff --git a/samples/coffee/0.coffee b/samples/coffee/0.coffee
new file mode 100644
index 0000000..ff3fb9c
--- /dev/null
+++ b/samples/coffee/0.coffee
@@ -0,0 +1,71 @@
+document.addEventListener("DOMContentLoaded", () =>
+    document.querySelectorAll("pre.msh .js-copy").forEach((copy) =>
+        copy.addEventListener("click", (e) =>
+            e.preventDefault()
+
+            content = copy.nextElementSibling
+            range = document.createRange()
+            range.selectNode(content)
+
+            window.getSelection().addRange(range)
+
+            try
+                successful = document.execCommand("copy")
+                copy.innerHTML = "Copied!"
+
+                setTimeout =>
+                    copy.innerHTML = "Copy"
+                , 1500
+
+                msg = successful ? "successful" : "unsuccessful"
+                console.log({ msg })
+
+            catch error
+                console.log("Oops, unable to copy...")
+
+            window.getSelection().removeAllRanges()
+        )
+    )
+
+    document.querySelectorAll("pre.msh code[data-language='html'] span.line").forEach((line) =>
+        content = line.innerHTML
+        content = content.replaceAll(/(&lt;(\/?))(.+?(?=&gt;))(&gt;)/g, "$1<span class='c2'>$3</span>$4")
+
+        line.innerHTML = content
+        pink = line.querySelector(".c2")
+
+        if pink != null
+            content = pink.innerHTML.split(" ")
+            content = content.map((part, index) =>
+                if index > 0
+                    if part.includes("=")
+                        part = part.replaceAll(/(.+?)(".*)/g, "<span class='c3'>$1</span><span class='c4'>$2</span>")
+                    else
+                        part = part.replaceAll(/(.*\S)/g, "<span class='c3'>$1</span>")
+                part
+            ).join(" ")
+            pink.innerHTML = content
+        return
+    )
+
+    document.querySelectorAll("pre.msh code[data-language='css'] span.line").forEach((line) =>
+        content = line.innerHTML
+
+        if line.dataset.indent
+            content = content.split(/:/g).map((part, index) =>
+                if index == 0
+                    part.replace(/(.*)/g, "<span class='c7'>$1</span>")
+                else
+                    part = part.replaceAll(/(\S.+?(?=\s|;))/g, "<span class='c6'>$1</span>")
+                    part = part.replaceAll(/(".+?(?=,|\s|;))/g, "<span class='c4'>$1</span>")
+                    part = part.replaceAll(/(url\(.+?(?=\s|;))/g, "<span class='c3'>$1</span>")
+                    part.replaceAll(/\((.+?(?=\)))/g, "(<span class='c4'>$1</span>")
+            ).join(":")
+        else
+            content = content.replaceAll(/(.+?(?=,|\s|{}))/g, "<span class='c2'>$1</span>")
+            content = content.replaceAll(/((\.|:).+?(?=\s))/g, "<span class='c3'>$1</span>")
+
+        line.innerHTML = content
+        return
+    )
+)
diff --git a/samples/css/0.css b/samples/css/0.css
new file mode 100644
index 0000000..a12e179
--- /dev/null
+++ b/samples/css/0.css
@@ -0,0 +1,32 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto:400);
+@import url("chrome://communicator/skin/");
+@import 'custom.css' screen and (max-width: 768px);
+
+@font-face {
+    font-family: 'Galada-Regular';
+    src: url('Galada-Regular.ttf');
+    font-style: normal;
+    font-weight: 400;
+}
+
+/* Applies to the entire body of the HTML document (except where overridden by more specific
+selectors). */
+body {
+	margin: 25px;
+	background-color: rgb(240,240,240);
+	font-family: arial, sans-serif;
+	font-size: 14px;
+}
+
+/* Applies to all <h1>...</h1> elements. */
+h1 {
+	font-size: 35px;
+	font-weight: normal;
+	margin-top: 5px;
+}
+
+/* Applies to all elements with <... class="someclass"> specified. */
+.someclass { color: red; }
+
+/* Applies to the element with <... id="someid"> specified. */
+#someid { color: green; }
diff --git a/samples/javascript/0.js b/samples/javascript/0.js
new file mode 100644
index 0000000..6c89381
--- /dev/null
+++ b/samples/javascript/0.js
@@ -0,0 +1,28 @@
+const Generator = require("yeoman-generator")
+const chalk = require('chalk')
+const yosay = require("yosay")
+
+module.exports = class extends Generator {
+	prompting() {
+		// have yeoman greet the user
+		this.log(chalk.red("Let\'s do this"))
+
+		const prompts = [{
+			message: 'Enter the excercise title',
+			worker: true,
+			action: null,
+			age: 123
+		}];
+
+		return this.prompt(prompts).then(props => {
+			// you can access them later
+			this.props = props
+		})
+	}
+}
+
+function exclamate(message) {
+	return message + "!"
+}
+
+console.log(exclamate("lol"))
diff --git a/samples/javascript.js b/samples/javascript/1.js
similarity index 100%
rename from samples/javascript.js
rename to samples/javascript/1.js
diff --git a/samples/json.json b/samples/json.json
new file mode 100644
index 0000000..a396764
--- /dev/null
+++ b/samples/json.json
@@ -0,0 +1,24 @@
+{
+	"name": "Catppuccin",
+	"version": "1.0.0",
+	"description": "JSON sample",
+	"main": "readme.md",
+	"scripts": {
+		"gulp": "gulp"
+	},
+	"devDependencies": {
+		"gulp": "^4.0.2",
+		"browser-sync": "^2.27.5",
+		"gulp-sass": "^5.0.0",
+		"gulp-uglify-es": "^2.0.0",
+		"sass": "^1.35.1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/catppuccin/catppuccin"
+	},
+	"keywords": ["gulp", "pugjs", "sass", "coffeescript", "template"],
+	"author": "John Doe",
+	"license": "MIT",
+	"homepage": "https://github.com/catppuccin"
+}
diff --git a/samples/rust.rs b/samples/rust.rs
index c8349fa..531316e 100644
--- a/samples/rust.rs
+++ b/samples/rust.rs
@@ -35,3 +35,13 @@ pub fn every_nth(str: &gsf, n: usize) -> String {
     }
     return parsed_str;
 }
+
+fn main(){
+   let arr:[i32;4] = [10,20,30,40];
+   println!("array is {:?}",arr);
+   println!("array size is :{}",arr.len());
+
+   for index in 0..4 {
+      println!("index is: {} & value is : {}",index,arr[index]);
+   }
+}