diff --git a/assets/css/dummy.css b/assets/css/dummy.css
new file mode 100644
index 0000000..d061a1f
--- /dev/null
+++ b/assets/css/dummy.css
@@ -0,0 +1,86 @@
+/* Basic Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Container Styling */
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+/* Header Styling */
+header {
+  background-color: #f8f9fa;
+  padding: 20px;
+  text-align: center;
+  border-bottom: 1px solid #dee2e6;
+}
+
+header h1 {
+  font-size: 2rem;
+  color: #343a40;
+}
+
+/* Navigation Styling */
+nav {
+  margin-top: 10px;
+}
+
+nav ul {
+  list-style-type: none;
+  display: flex;
+  justify-content: center;
+}
+
+nav ul li {
+  margin: 0 15px;
+}
+
+nav ul li a {
+  text-decoration: none;
+
+  color: #007bff;
+
+  font-size: 1rem;
+}
+
+nav ul li a:hover {
+  text-decoration: underline;
+}
+
+/* Main Content Styling */
+main {
+  padding: 20px;
+}
+
+article {
+  margin-bottom: 20px;
+}
+
+article h2 {
+  font-size: 1.5rem;
+  color: #495057;
+}
+
+article p {
+  line-height: 1.6;
+  color: #212529;
+}
+
+/* Footer Styling */
+footer {
+  background-color: #f8f9fa;
+  padding: 10px;
+  text-align: center;
+  border-top: 1px solid #dee2e6;
+}
+
+footer p {
+  font-size: 0.875rem;
+  color: #6c757d;
+}
diff --git a/assets/js/dummy.js b/assets/js/dummy.js
index f8fb829..6923db3 100644
--- a/assets/js/dummy.js
+++ b/assets/js/dummy.js
@@ -1,44 +1,56 @@
-// Importing React (necessary if using JSX)
-import React from "react";
+/**
+ * A simple function to calculate the sum of two numbers.
+ *
+ * @param {number} a - The first number.
+ * @param {number} b - The second number.
+ * @returns {number} The sum of the two numbers.
+ */
 
-// Example function using a regular function declaration
-function multiply(x, y) {
-  return x * y;
+function add(a, b) {
+  return a + b;
 }
 
-// Example usage of a function
-let result = multiply(4, 5);
-console.log("The product is:", result); // Output: The product is: 20
-
-// Example of a variable declared with let
-let count = 0;
-for (let i = 0; i < 5; i++) {
-  count += i;
+/**
+ * Logs a greeting message to the console.
+ *
+ * @param {string} name - The name to greet.
+ */
+function greet(name) {
+  console.log(`Hello, ${name}!`);
 }
 
-console.log("The count is:", count); // Output: The count is: 10
+// Example usage
+const result = add(5, 10);
 
-// Example of a variable declared with let (instead of const)
-let message = "This is a message";
-console.log(message);
+console.log(`The result is: ${result}`);
 
-// Example of a React functional component
-function Greeting({ name }) {
-  return (
-    <div>
-      <h1>Hello, {name}!</h1>
-    </div>
-  );
+greet("Alice"); // Replaced 'Alice' with "Alice"
+
+/**
+ * An example class demonstrating basic TypeScript features in JavaScript.
+ */
+class Person {
+  /**
+   * Creates an instance of Person.
+   *
+   * @param {string} name - The name of the person.
+   * @param {number} age - The age of the person.
+   */
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+
+  /**
+   * Introduces the person.
+   *
+   * @returns {string} A greeting message.
+   */
+  introduce() {
+    return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
+  }
 }
 
-// Usage of the Greeting component
-function App() {
-  return (
-    <div>
-      <Greeting name="Alice" />
-    </div>
-  );
-}
-
-// Export the App component for usage in other parts of the application
-export default App;
+// Example usage of the Person class
+const person = new Person("Bob", 25); // Replaced 'Bob' with "Bob"
+console.log(person.introduce());