diff --git a/docs/chapter1/1introduction.md b/docs/chapter1/1introduction.md
deleted file mode 100644
index 301dafbb..00000000
--- a/docs/chapter1/1introduction.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-id: chapter1-introduction
-title: "Introduction"
-description: "Introduction page in Chapter1 of CircuitVerse documentation."
-slug : /
----
-
-# Introduction
-
-
-
-Inspired by Logisim, CircuitVerse is an open-source educational tool for designing and visualizing digital logic circuit simulations in the cloud. Users including educators, students, electronic engineers, and hobbyists can play with digital circuit simulations from their browsers for exploring different “what-if” scenarios. As required, a user can share their creations using unique circuit URLs, or fork different contributions of the CircuitVerse community to yield their curiosity. Figure 1 shares a screenshot of a ripple carry adder simulation built using CircuitVerse.
-
-
-
-
- Figure 1.1: Ripple Carry Adder simulation built using CircuitVerse
-
-
-Developed for educators by educators, the CircuitVerse platform delivers high class learning experience in a scalable way. Educators can manage, track, and achieve their classroom learning goals in a single, powerful solution. They can create and manage different student groups, post different assignments, define submission deadlines and add or export grades (refer Figure 2). Using the CircuitVerse Chrome extension, educators can embed live circuits in their Google Slides and demonstrate concepts without navigating across different tabs. Alternatively, they can also export images or embed iFrames within their webpages.
-
-
-
-
-
- Figure 1.2: Educators can manage, track, and achieve their classroom
- learning goals using CircuitVerse platform
-
-
-
-As the CircuitVerse community grows, educators and students can join the online forums to share ideas, questions, and resources related to teaching and learning digital logic design using CircuitVerse.
-
-
-
-
-
- Figure 1.3: Connect and collaborate on CircuitVerse Forum for sharing ideas,
- questions, and resources related to teaching and learning digital logic
- design
-
-
-
-Watch the below video for a quick demonstration of the CircuitVerse platform.
-
-
-
-
diff --git a/docs/chapter1/1introduction.mdx b/docs/chapter1/1introduction.mdx
new file mode 100644
index 00000000..8579c7db
--- /dev/null
+++ b/docs/chapter1/1introduction.mdx
@@ -0,0 +1,57 @@
+---
+id: chapter1-introduction
+title: "Introduction"
+description: "Introduction to CircuitVerse and its features."
+slug: /
+---
+
+## What is CircuitVerse?
+
+Inspired by Logisim, **CircuitVerse** is an open-source educational platform for designing and visualizing digital logic circuits directly in the browser. It enables educators, students, electronics engineers, and hobbyists to experiment with digital circuit simulations and explore various "what-if" scenarios.
+
+Users can share their creations using unique circuit URLs or fork projects from the CircuitVerse community to satisfy their curiosity.
+
+
+
+*Figure 1.1: Ripple Carry Adder simulation built using CircuitVerse*
+
+
+
+## Classroom Management
+
+Developed for educators by educators, CircuitVerse delivers a **high-quality learning experience** at scale. Educators can:
+
+- Create and manage student groups
+- Assign projects with deadlines
+- Track submissions and export grades
+
+Using the CircuitVerse Chrome extension, instructors can embed live circuits into Google Slides or export simulations as images or iFrames.
+
+
+
+*Figure 1.2: Classroom management features in CircuitVerse*
+
+
+
+## Community & Collaboration
+
+As the CircuitVerse community grows, educators and students can connect through online forums to share ideas, ask questions, and collaborate on digital logic design concepts.
+
+
+
+*Figure 1.3: CircuitVerse community forum*
+
+
+
+## Video Overview
+
+Watch the video below for a quick demonstration of the CircuitVerse platform:
+
+
diff --git a/docs/chapter8/1circuittoverilog.md b/docs/chapter8/1circuittoverilog.md
index ca52b127..b0b55ced 100644
--- a/docs/chapter8/1circuittoverilog.md
+++ b/docs/chapter8/1circuittoverilog.md
@@ -1,64 +1,94 @@
-# Verilog support in CircuitVerse
+# Verilog Support in CircuitVerse
-CircuitVerse together with providing a graphical interface for designing circuits, it also supports Verilog which is a popular hardware description languages which allows the users to simulate hardware and test them. CircuitVerse provides two types of verilog features:
+In addition to providing a graphical interface for designing digital circuits, CircuitVerse also supports **Verilog**, a popular hardware description language (HDL) used to model, simulate, and verify digital systems.
- - [Circuit to Verilog code](#Circuit-to-Verilog-code)
- - [Steps to Convert Circuit to Verilog Code](#Steps-to-Convert-Circuit-to-Verilog-Code)
- - [Features and Verilog construct provided by Circuitverse](#Features-and-Verilog-construct-provided-by-Circuitverse)
- - [Example](#Example)
- - [Verilog code to Circuit](2verilogtocircuit.md)
+CircuitVerse provides two Verilog-related features:
-## Circuit to Verilog code
-CircuitVerse allows users to convert graphical circuits into Verilog code and export them to be run by different verilog simulators like EDA playground and reconfigurable integrated circuits like FPGAs (NOTE: CV doesn't generate bitstreams for hardware).
+- [Circuit to Verilog Code](#circuit-to-verilog-code)
+ - [Steps to Convert Circuit to Verilog Code](#steps-to-convert-circuit-to-verilog-code)
+ - [Features and Verilog Constructs Provided by CircuitVerse](#features-and-verilog-constructs-provided-by-circuitverse)
+ - [Example](#example)
+- [Verilog Code to Circuit](2verilogtocircuit.md)
+
+---
+
+## Circuit to Verilog Code
+
+CircuitVerse allows users to convert graphical circuits into Verilog code. The generated code can be exported and simulated using external Verilog simulators such as **EDA Playground**.
+
+> **Note:** CircuitVerse does not generate FPGA bitstreams. If the generated Verilog code is intended for FPGA implementation, it must be synthesized and processed using appropriate FPGA toolchains (e.g., Quartus, Vivado), and compatibility is not guaranteed.
+
+---
## Steps to Convert Circuit to Verilog Code
-1. **Design Your Circuit**: Create your digital circuit using the CircuitVerse online simulator. Ensure that your circuit is complete and functions as expected.
+### 1. Design Your Circuit
+Create your digital circuit using the CircuitVerse online simulator. Ensure that your circuit is complete and functions as expected before exporting.
+
+### 2. Access the Verilog Conversion Tool
+- Click on the **"Tools"** menu located at the top of the CircuitVerse interface.
+- Select the **"Export Verilog"** option from the dropdown menu (Refer to Figure 8.1).
-2. **Access the Verilog Conversion Tool**:
- - Once your circuit is ready, click on the **"Tools"** menu located at the top of the CircuitVerse interface.
- - Select the **"Export Verilog"** option from the dropdown menu. Refer Figure 8.1.
+
- 
+
Figure 8.1
-
Figure 8.1
+### 3. Label Inputs and Outputs
+Assign labels to input, output, and other elements in your circuit. These labels are used as signal names in the generated Verilog code, improving readability and debugging.
-3. **Give labels to your input and output elements**:
- - You can give your input, output and elements labels to name them respectively in generated verilog code. This also helps in debugging the code.
+### 4. Generate Verilog Code
+- A new window will open displaying the generated Verilog module.
+- A testbench template is also generated (commented out).
+- Review the generated code carefully to ensure it correctly represents your circuit (Refer to Figure 8.2).
-4. **Generate Verilog Code**:
- - A new window will appear displaying the Verilog code and testbench(commented) generated from your circuit.
- - Review the generated code to ensure it accurately represents your circuit design. Refer Figure 8.2.
+
- 
+
Figure 8.2
-
Figure 8.2
+> **Note:** Verilog support in CircuitVerse is an experimental feature. In certain cases, the generated code may require manual corrections.
- > NOTE: Verilog support is an experimental feature in CV so, in some cases it can generate wrong verilog code.
+### 5. Download or Copy the Code
+- You may download the Verilog file (`.v`) or copy the generated code directly.
+- Use the code in your preferred Verilog simulator.
+- **EDA Playground** is recommended, using **Icarus Verilog** as the simulation engine.
-5. **Download or Copy the Code**:
- - You can either download the Verilog code as a `.v` file or copy the code directly from the window.
- - Use the downloaded or copied code in your preferred Verilog simulator or integrate it into your existing Verilog projects.
- - EDA playground is suggested as simulator to run the generated verilog module (Icarus verilog is the supported version).
+### 6. Testbench Generation
+The Verilog export window includes a commented testbench template. Users must manually provide stimulus values and complete the testbench before simulation.
-6. **Testbench code generated**:
- - The verilog window also contains testbench for the generated verilog module generated but is commented out, it is not filled with the sample values and the user need to enter it manually.
+---
-## Features and Verilog construct provided by Circuitverse
-CircuitVerse supports a variety of Verilog constructs, including:
+## Features and Verilog Constructs Provided by CircuitVerse
-- **Primitive Gates**: Basic logic gates like AND, OR, NOT, NAND, NOR, XOR, and XNOR can be defined using Verilog.
-- **Sequential elements**: Sequential elements like flip-flops, latches, RAM, ROM, ALU etc can be defined using Verilog.
-- **Gate-Level and Behavioral Code**: CV supports generating Verilog code at both gate and behavioral levels, depending on circuit complexity .
-- **Verilog Module Instantiations and Subcircuits**: Each subcircuit in CircuitVerse is converted into a separate Verilog module which is then instantiated in the main module.
+CircuitVerse supports generation of the following Verilog constructs:
+
+- **Primitive Gates:** AND, OR, NOT, NAND, NOR, XOR, and XNOR.
+- **Sequential Elements:** Flip-flops and latches.
+- **Higher-Level Components:** RAM, ROM, ALU, and other composite elements are translated into corresponding Verilog representations.
+- **Structural (Gate-Level Style) Code:** CircuitVerse primarily generates structural Verilog using continuous assignments and module instantiations.
+- **Subcircuits as Modules:** Each subcircuit is converted into a separate Verilog module, which is instantiated within the main module.
+
+> CircuitVerse primarily generates structural Verilog. Advanced behavioral constructs (e.g., complex FSM descriptions) are not automatically synthesized from graphical circuits.
+
+---
## Example
-Here is a simple example of a AND Gate circuit and its corresponding Verilog code:
+Below is a simple example of an AND gate circuit and its corresponding generated Verilog code.
### Circuit Design
-
+
### Generated Verilog Code
@@ -67,10 +97,8 @@ module Main(out1, inp1, inp2);
output out1;
input inp1, inp2;
wire and_0_out;
+
assign and_0_out = inp1 & inp2;
assign out1 = and_0_out;
-endmodule
-```
-
-> TIP: By following these steps, you can efficiently convert your CircuitVerse designs into Verilog code, integrate it into your verilog project and do further simulation and integration into your digital design workflow. The generated verilog code can be also used in reconfigured circuit boards like FPGAs to simulate the hardware.
+endmodule
\ No newline at end of file
diff --git a/package.json b/package.json
index 0e01e4d5..0e20bb7f 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,6 @@
]
},
"engines": {
- "node": ">=18.0"
+ "node": ">=18"
}
}
diff --git a/src/css/custom.css b/src/css/custom.css
index f290fe31..6d003233 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -5,4 +5,24 @@
height: auto;
aspect-ratio: 4 / 3;
}
+}
+
+/* === Figure and Caption Styling === */
+figure {
+ margin: 1.5rem 0;
+ text-align: center;
+}
+
+figure img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+figcaption {
+ margin-top: 0.5rem;
+ font-size: 0.9rem;
+ color: var(--ifm-color-emphasis-600);
+ font-style: italic;
}
\ No newline at end of file