diff --git a/content/guides/(javascript)/variables-and-operators/index.mdx b/content/guides/(javascript)/variables-and-operators/index.mdx
new file mode 100644
index 0000000..b812646
--- /dev/null
+++ b/content/guides/(javascript)/variables-and-operators/index.mdx
@@ -0,0 +1,11 @@
+---
+title: Variables and Operators
+description: A comprehensive guide on variables and operators in JavaScript, covering variable declaration, types of variables, naming conventions, and various operators.
+---
+
+## Learning Objectives
+
+1. Students will be able to define a variables in JavaScript and explain its role in storing and managing data within the program;
+2. Differentiate between var, let, and const in JavaScript, and demonstrate how to declare variables using each keyword appropriately in different scenarios;
+3. Apply the general rules and best practices for naming and declaring variables in JavaScript; and
+4. Classify and use different types of operators (arithmetic, assignment, comparison, logical, etc.) in JavaScript.
diff --git a/content/guides/(javascript)/variables-and-operators/meta.json b/content/guides/(javascript)/variables-and-operators/meta.json
new file mode 100644
index 0000000..5e00076
--- /dev/null
+++ b/content/guides/(javascript)/variables-and-operators/meta.json
@@ -0,0 +1,3 @@
+{
+	"pages": ["variables", "operators"]
+}
diff --git a/content/guides/(javascript)/variables-and-operators/operators.mdx b/content/guides/(javascript)/variables-and-operators/operators.mdx
new file mode 100644
index 0000000..3259706
--- /dev/null
+++ b/content/guides/(javascript)/variables-and-operators/operators.mdx
@@ -0,0 +1,179 @@
+---
+title: Operators
+description: Overview of JavaScript operators, including types and examples of arithmetic operations.
+---
+
+JavaScript includes operators same as other languages. An operator performs some operation on single or multiple operands (data value) and produces a result. For example, in 1 + 2, the + sign is an operator and 1 is left side operand and 2 is right side operand. The + operator performs the addition of two numeric values and returns a result.
+
+## Types of JavaScript Operators
+
+There are different types of JavaScript operators
+
+### Arithmetic Operators
+
+Arithmetic operators are used to perform mathematical operations between numeric operands.
+
+| Operator | Description                                         |
+|----------|-----------------------------------------------------|
+| +        | Adds two numeric operands.                          |
+| -        | Subtract right operand from left operand.           |
+| *        | Multiply two numeric operands.                      |
+| /        | Divide left operand by right operand.               |
+| %        | Modulus operator, Returns remainder of two operands.|
+| ++       | Increment operator. Increase operand value by one.  |
+| --       | Decrement operator. Decrease value by one.          |
+
+The following example demonstrates how arithmetic operators perform different tasks on operands.
+
+```js
+let x = 5, y = 10;
+
+let z = x + y; // performs addition and returns 15
+
+z = x - y;    // performs subtraction and returns -5
+
+z = x * y;    // performs multiplication and returns 50
+
+z = x / y;    // performs division and returns 0.5
+
+z = x % 2;    // performs division remainder 1
+```
+
+### Operator Precedence
+
+- Operator precedence describes the order in which operations are performed in arithmetic expressions
+- Multiplication (*) and division (/) have higher precedence than addition (+) and subtraction (-). (**MDAS** Rule)
+- We can change the precedence by using parentheses ()
+
+**Example**:
+  - (100 + 50) * 3;
+  - The program will compute for the sum of 100 and 5 first before multiplying it by 3.
+
+### Assignment Operator
+
+JavaScript provides the assignment operators to assign values to variables with less keystrokes.
+
+| Assignment Operator | Description                                                                                             |
+|---------------------|---------------------------------------------------------------------------------------------------------|
+| =                   | Assigns right operand value to the left operand.                                                        |
+| +=                  | Sums up left and right operand values and assigns the result to the left operand.                        |
+| -=                  | Subtract right operand value from the left operand value and assign the result to the left operand.     |
+| *=                  | Multiply left and right operand values and assigns the result to the left operand.                      |
+| /=                  | Divide left operand value by right operand value and assigns the result to the left operand.            |
+| %=                  | Get the modulus of left operand divide by right operand and assign resulted modulus to the left operand.|
+
+```js
+let x = 5, y = 10, z = 15;
+
+x = y; // x would be 10
+
+x += 1; // x would be 6
+
+x -= 1; // x would be 4
+
+x *= 5; // x would be 25
+
+x /= 5; // x would be 1
+
+x &= 2; // x would be 1
+```
+
+The addition assignment operator (**+=**) adds a value to a variable.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Arithmetic</h1>
+    <h2>The += Operator</h2>
+    <p id="demo"></p>
+    <script>
+      var x = 10;
+      x += 5;
+      document.getElementById("demo").innerHTML = x;
+    </script>
+  </body>
+</html>
+```
+
+The addition assignment operator (**+=**) can also be used to add (concatenate) strings.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>Combining Strings</h1>
+    <h2>The += Operator</h2>
+    <p id="demo"></p>
+    <script>
+      let message = "It is ";
+      message += "a beautiful day!";
+      document.getElementById("demo").innerHTML = message;
+    </script>
+  </body>
+</html>
+```
+
+### Comparison Operators
+
+JavaScript provides comparison operators that compare two operands and return a boolean value true or false.
+
+| Operators | Description                                                                                                                     |
+|-----------|---------------------------------------------------------------------------------------------------------------------------------|
+| ==        | Compares the equality of two operands without considering type.                                                                 |
+| ===       | Compares equality of two operands with type.                                                                                    |
+| !=        | Compares of inequality of two operands.                                                                                         |
+| &gt;      | Returns a boolean value true if the left-side value is greater than right-side value; otherwise, returns false.                 |
+| &lt;      | Returns a boolean value true if the left-side value is less than right-side value; otherwise, returns false.                    |
+| >=        | Returns a boolean value true if the left-side value is greater than or equal to the right-side value; otherwise, returns false. |
+| &lt;=     | Returns a boolean value true if the left-side value is less than or equal to the right-side value; otherwise, returns false.    |
+
+The following example demonstrates the comparison operators.
+
+```js
+let a = 5, b = 10, c = "5";
+let x = a;
+
+a == c; // returns true
+
+a === c; // returns false
+
+a == x; // returns true
+
+a != b; // returns true 
+
+a > b; // returns false
+
+a < b; // returns true
+
+a >= b; // returns false
+
+a <= b; // returns true
+
+```
+
+### Logical Operators
+
+In JavaScript, the logical operators are used to combine two or more conditions. JavaScript provides the following logical operators.
+
+| Operator | Description                                                                                                                                                                                                          |
+|----------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| &&       | && is known as AND operator. It checks whether two operands are non-zero or not (0, false, undefined, null or "" are considered as zero). It returns 1 if they are non-zero; otherwise, returns 0.                   |
+| &#124;&#124; | &#124;&#124; is known as OR operator. It checks whether any one of the operands is non-zero or not (0, false, undefined, null or "" are considered as zero). It returns 1 if any one of them is non-zero; otherwise, returns 0.|
+| !        | ! is known as NOT operator. It reverses the boolean result of the operand (or condition). `!false` returns `true`, and `!true` returns `false`.                                                                      |
+
+The following example demonstrates the logical operators.
+
+```js
+let a = 5, b = 10;
+
+(a != b) && (a < b);  // returns true
+
+(a > b) || (a == b);  // returns false
+
+(a < b) || (a == b);  // returns true
+
+!(a < b);             // returns false
+
+!(a > b);             // returns true
+```
diff --git a/content/guides/(javascript)/variables-and-operators/variables.mdx b/content/guides/(javascript)/variables-and-operators/variables.mdx
new file mode 100644
index 0000000..b8a6bda
--- /dev/null
+++ b/content/guides/(javascript)/variables-and-operators/variables.mdx
@@ -0,0 +1,258 @@
+---
+title: Variables
+description: Overview of JavaScript variables, including their declaration using var, let, const, and examples demonstrating their usage.
+---
+
+Variable means anything that can vary. In JavaScript, a variable stores data that can be changed later on. 
+
+Variables are containers for storing data values. All JavaScript variables must be identified with unique names. The unique names are called identifiers. Identifiers can be short names (like x and y) or more descriptive names (like age, sum, total).
+
+### Declaring Variables
+
+There are 4 ways to declare variables in JavaScript:
+
+#### Using `var`
+
+`var` keyword is used to declare variables since JavaScript was created. It is confusing and error-prone when using variables declared using `var`.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Variables</h1>
+    <p>In this example, fname and age are variables declared using var.</p>
+    <p id="fname"></p>
+    <p id="age"></p>
+    <script>
+      var fname = "Amber";
+      var age = 10;
+      document.getElementById("fname").innerHTML = "My name is " + fname;
+      document.getElementById("age").innerHTML = "I am " + age + " years old";
+    </script>
+  </body>
+</html>
+```
+
+#### Using `let`
+
+`let` keyword removes the confusion and error of `var`. It is the **new** and **recommended** way of declaring variables in JavaScript.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Variables</h1>
+    <p>In this example, fname and age are variables declared using let.</p>
+    <p id="fname"></p>
+    <p id="age"></p>
+    <script>
+      var fname = "Miah";
+      var age = 10;
+      document.getElementById("fname").innerHTML = "My name is " + fname;
+      document.getElementById("age").innerHTML = "I am " + age + " years old";
+    </script>
+  </body>
+</html>
+```
+
+#### Using `const`
+
+`const` keyword is used to declare a constant variable that cannot be changed once assigned a value. Constant variables must be declared and initialized at the same time. The value of the constant variables can't be changed after initialized them.
+
+The value of a constant variable cannot be changed but the content of the value can be changed. For example, if an object is assigned to a const variable then the underlying value of an object can be changed.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Variables</h1>
+    <p>In this example, fname and age are variables declared using const.</p>
+    <p id="fname"></p>
+    <p id="age"></p>
+    <script>
+      const fname = "Geastine";
+      const age = 8;
+      document.getElementById("fname").innerHTML = "My name is " + fname;
+      document.getElementById("age").innerHTML = "I am " + age + " years old";
+    </script>
+  </body>
+</html>
+```
+
+#### Using nothing (direct variable names)
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Variables</h1>
+    <p>In this example, fname and age are undeclared variables.</p>
+    <p id="fname"></p>
+    <p id="age"></p>
+    <script>
+      fname = "Zildjian";
+      age = 8;
+      document.getElementById("fname").innerHTML = "My name is " + fname;
+      document.getElementById("age").innerHTML = "I am " + age + " years old";
+    </script>
+  </body>
+</html>
+```
+
+### When to use `var`?
+
+The `var` keyword is used for declaring variables in all JavaScript code from **1995** to **2015**.
+
+The `let` and `const` keywords were only added to JavaScript in **2015**. `var` is used when created web sites will be used in older browsers.
+
+### When to use `let` and `const`
+
+- We will use `const` if the value of the variable will not be changed within the program.
+- We will use `let` if the value of the variable can be change within the program.
+
+#### Using `let` and `const`
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Variables</h1>
+    <p id="demo"></p>
+    <script>
+      const num1 = 12;
+      const num1 = 28;
+      let total = num1 + num2;
+      document.getElementById("demo").innerHTML = "The total is " + total;
+    </script>
+  </body>
+</html>
+```
+
+### Notes in Declaring Variables in JavaScript
+
+- You can assign a value to a variable using the `=` operator when you declare it or after the declaration and before accessing it.
+  ```js
+  let msg;
+  msg = "Hello JavaScript!"; // assigning a string value
+  ```
+  <Callout>
+  In the above example, the `msg` variable is declared first and then assigned a **string** value in the next line.
+  </Callout>
+
+- You can declare a variable and assign a value to it in the same line. Values can be of any datatype such as **string**, **numeric**, **boolean**, etc.
+  ```js
+  let name = "Juan";    // assigned string value
+  let num = 100;        // assigned numeric value
+  let isActive = true;  // assigned boolean value
+  ```
+
+- Multiple variables can be declared in a single line, as shown below.
+  ```js
+  let name = "Juan", num = 100, isActive = true;
+  ```
+
+- You can copy the value of one variable to another variable, as shown below.
+  ```js
+  let num1 = 100;
+  let num2 = num1;
+  ```
+
+- JavaScript allows multiple white spaces and line breaks when you declare a variables.
+  ```js
+  let name = "Juan", 
+      num = 100, 
+      isActive = true;
+  ```
+
+<Callout type="warn">
+You cannot redeclare a variable using `let` keyword
+</Callout>
+
+- Variable names are case-sensitive in JavaScript. You cannot declare a duplicate variable using the let keyword with the same name and case. JavaScript will throw a syntax error. Although, variables can have the same name if declared with the var keyword (this is why it is recommended to use let).
+  ```js
+  let num = 100;
+  let num = 200; // syntax error
+
+  var num = 100;
+  var num = 200; // ok 👍
+  ```
+
+### General Rules for Constructing Variable Names
+
+- Variable names are case-sensitive in JavaScript. So, the variable names **msg**, **MSG**, **Msg**, **mSg** are considered separate variables.
+- Variable names can contain letters, digits, or the symbols `$` and `_`.
+- A variable name cannot start with a digit **0-9**.
+- A variable name cannot be a reserved keyword in JavaScript, e.g. **var**, **function**, **return** cannot be variable names.
+
+### Dynmic Typing
+
+- JavaScript is a loosely typed language. It means that you don't need to specify what data type a variable will contain. You can update the value of any type after initialization. It is also called dynamic typing.
+- JavaScript variables can hold numbers and text values or strings. 
+- Strings are declared by placing them inside double or single quotes.
+- Numeric values are declared without quotes. If you put a number in quotes, it will be treated as a text string.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <h1>JavaScript Data Types</h1>
+    <p id="line1"></p>
+    <p id="line2"></p>
+    <script>
+      const pi = 3.14;
+      let age = 25;
+      let fname = "Andrew";
+      let lname = "Ford";
+      document.getElementById("line1").innerHTML = "I am " + fname + " " + lname + " and I am " + age + " years old";
+      document.getElementById("line2").innerHTML = "The value of Pi is " + pi;
+    </script>
+  </body>
+</html>
+```
+
+### Variable Scope
+
+**Global Variables**
+
+Variables declared out of any function are called global variables. They can be accessed anywhere in the JavaScript code, even inside any function.
+
+**Local Variables**
+
+Variables declared inside the function are called local variables of that function. They can only be accessed in the function where they are declared but not outside.
+
+```js
+function myFunction() {
+  let msg = "JavaScript!";
+  alert(greet + msg); // can access global and local variable
+}
+
+myFunction();
+
+alert(greet); // can access global variable
+alert(msg);   // error: can't access local variable
+```
+
+#### Declare Variables Without var and let Keywords
+
+Variables can be declared and initialized without the `var` or `let` keywords. However, a value must be assigned to a variable declared without the var keyword.
+
+The variables declared without the `var` keyword become **global variables**, irrespective of where they are declared. It is recommended to declare variable using the `let` keyword.
+
+```js
+function myFunction() {
+  msg = "JavaScript!";
+}
+
+myFunction();
+alert(msg);   // msg becomes global variable so can be accessed here
+```
+
+### Undefined Values in Variables
+
+In computer programs, variables are often declared without a value. The value can be something that has to be calculated, or something that will be provided later, like user input.
+
+A variable declared without a value will have the value **undefined**.
+
+**Example**: 
+  - let name; 
+  - the value of name will be undefined and will just wait for the value assigned within the program or provided by the user as an input.
diff --git a/content/guides/meta.json b/content/guides/meta.json
index 3885758..f05a079 100644
--- a/content/guides/meta.json
+++ b/content/guides/meta.json
@@ -19,6 +19,7 @@
     "/(javascript)/functions",
     "/(javascript)/js-form",
     "/(javascript)/event-handlers",
-    "/(javascript)/dom"
+    "/(javascript)/dom",
+    "/(javascript)/variables-and-operators"
   ]
 }
diff --git a/data/resources.ts b/data/resources.ts
index bda1869..627c926 100644
--- a/data/resources.ts
+++ b/data/resources.ts
@@ -127,6 +127,12 @@ export const resourcesData: Record<string, IResourceCategory> = {
 			{
 				title: "General Icons",
 				links: [
+					{
+						title: "SVGmix",
+						url: "https://svgmix.com",
+						description: "Download thousands of free SVG icons, vector collections & brand logos.",
+						iconPath: "/resources/icons/svgmix.svg",
+					},
 					{
 						title: "SVGmix",
 						url: "https://svgmix.com",
@@ -258,6 +264,13 @@ export const resourcesData: Record<string, IResourceCategory> = {
 			{
 				title: "SVG Generators",
 				links: [
+					{
+						title: "Creatica",
+						url: "https://creatica.app/",
+						description:
+							"Create stunning backgrounds with Creatica, your go-to design tool for unique and dynamic designs. Perfect for web designers, graphic artists, and creative minds.",
+						iconPath: "/resources/icons/creatica.svg",
+					},
 					{
 						title: "Creatica",
 						url: "https://creatica.app/",