diff --git a/web/app/docs/post-install/basic-settings/page.tsx b/web/app/docs/post-install/basic-settings/page.tsx
index 7537985..2516ac0 100644
--- a/web/app/docs/post-install/basic-settings/page.tsx
+++ b/web/app/docs/post-install/basic-settings/page.tsx
@@ -44,124 +44,13 @@ export default function BasicSettingsPage() {
       </p>
       <h2 className="text-2xl font-semibold mt-8 mb-4">Available Optimizations</h2>
 
-      <div className="space-y-12 my-8">
-        {/* Optimization 1 */}
-        <div className="relative">
-          <div className="flex items-start">
-            <div className="flex-shrink-0 flex flex-col items-center mr-4">
-              <div className="rounded-full bg-blue-500 text-white w-10 h-10 flex items-center justify-center font-bold text-lg">
-                1
-              </div>
-              <div className="h-full w-0.5 bg-blue-200 mt-2"></div>
-            </div>
-            <div className="flex-grow">
-              <h3 className="text-xl font-semibold mb-4">Install Common System Utilities</h3>
-              <section className="mb-8">
-                <p className="mb-4">
-                  This optimization installs a set of common system utilities that are useful for system administration
-                  and troubleshooting.
-                </p>
-
-                <p className="mb-4">
-                  <strong>Why it's beneficial:</strong> Having these utilities pre-installed saves time when managing
-                  your Proxmox VE system. They provide essential tools for monitoring system performance, managing
-                  files, and troubleshooting issues, enhancing your ability to maintain and optimize your virtualization
-                  environment.
-                </p>
-                <h4 className="text-lg font-semibold mb-2">Utilities installed:</h4>
-                <ul className="list-disc pl-5 mb-4">
-                  <li>
-                    <strong>axel</strong>: A light command-line download accelerator
-                  </li>
-                  <li>
-                    <strong>curl</strong>: A tool for transferring data using various protocols
-                  </li>
-                  <li>
-                    <strong>dialog</strong>: A tool for creating TUI interfaces
-                  </li>
-                  <li>
-                    <strong>dnsutils</strong>: DNS utilities including dig and nslookup
-                  </li>
-                  <li>
-                    <strong>dos2unix</strong>: Text file format converter
-                  </li>
-                  <li>
-                    <strong>gnupg-agent</strong>: GNU privacy guard - password agent
-                  </li>
-                  <li>
-                    <strong>grc</strong>: Generic colouriser for everything
-                  </li>
-                  <li>
-                    <strong>htop</strong>: An interactive process viewer
-                  </li>
-                  <li>
-                    <strong>btop</strong>: A resource monitor that shows usage and stats for processor, memory, disks,
-                    network and processes
-                  </li>
-                  <li>
-                    <strong>iftop</strong>: A tool to display bandwidth usage on an interface
-                  </li>
-                  <li>
-                    <strong>iotop</strong>: A tool to display I/O usage by processes
-                  </li>
-                  <li>
-                    <strong>iperf3</strong>: A tool for active measurements of the maximum achievable bandwidth on IP
-                    networks
-                  </li>
-                  <li>
-                    <strong>ipset</strong>: A tool to manage IP sets in the Linux kernel
-                  </li>
-                  <li>
-                    <strong>iptraf-ng</strong>: An interactive colorful IP LAN monitor
-                  </li>
-                  <li>
-                    <strong>mlocate</strong>: A tool to find files by name quickly
-                  </li>
-                  <li>
-                    <strong>msr-tools</strong>: Tools for accessing CPU model-specific registers
-                  </li>
-                  <li>
-                    <strong>nano</strong>: A small, friendly text editor
-                  </li>
-                  <li>
-                    <strong>net-tools</strong>: A collection of programs that form the base set of the NET-3 networking
-                    distribution for the Linux operating system
-                  </li>
-                  <li>
-                    <strong>omping</strong>: An open multicast ping tool
-                  </li>
-                  <li>
-                    <strong>software-properties-common</strong>: Provides an abstraction of the used apt repositories
-                  </li>
-                  <li>
-                    <strong>sshpass</strong>: A tool for non-interactive ssh password authentication
-                  </li>
-                  <li>
-                    <strong>tmux</strong>: A terminal multiplexer
-                  </li>
-                  <li>
-                    <strong>unzip</strong>: A tool for extracting and viewing files in .zip archives
-                  </li>
-                  <li>
-                    <strong>vim</strong> and <strong>vim-nox</strong>: A highly configurable text editor
-                  </li>
-                  <li>
-                    <strong>wget</strong>: A utility for non-interactive download of files from the Web
-                  </li>
-                  <li>
-                    <strong>whois</strong>: A client for the whois directory service
-                  </li>
-                  <li>
-                    <strong>zip</strong>: A compression and file packaging utility
-                  </li>
-                  <li>
-                    <strong>libguestfs-tools</strong>: A set of tools for accessing and modifying virtual machine disk
-                    images
-                  </li>
-                </ul>
-                <h4 className="text-lg font-semibold mb-2">To apply this optimization manually, run:</h4>
-                <CopyableCode
-                  code={`
+      <div className="space-y-8">
+        <OptimizationStep
+          number={1}
+          title="Install Common System Utilities"
+          description="This optimization installs a set of common system utilities that are useful for system administration and troubleshooting."
+          benefits="Having these utilities pre-installed saves time when managing your Proxmox VE system. They provide essential tools for monitoring system performance, managing files, and troubleshooting issues, enhancing your ability to maintain and optimize your virtualization environment."
+          code={`
 # Update package lists
 sudo apt-get update
 
@@ -170,106 +59,71 @@ sudo apt-get install -y axel curl dialog dnsutils dos2unix gnupg-agent grc htop
 sudo apt-get install -y iperf3 ipset iptraf-ng mlocate msr-tools nano net-tools omping
 sudo apt-get install -y software-properties-common sshpass tmux unzip vim vim-nox wget whois zip
 sudo apt-get install -y libguestfs-tools
-            `}
-                />
-              </section>
-            </div>
-          </div>
-        </div>
+      `}
+        >
+          <h4 className="text-lg font-semibold mb-2">Utilities installed:</h4>
+          <ul className="list-disc pl-5 mb-4 space-y-2">
+            <li><strong>axel</strong>: A light command-line download accelerator</li>
+            <li><strong>curl</strong>: A tool for transferring data using various protocols</li>
+            <li><strong>dialog</strong>: A tool for creating TUI interfaces</li>
+            <li><strong>dnsutils</strong>: DNS utilities including dig and nslookup</li>
+            <li><strong>dos2unix</strong>: Text file format converter</li>
+            <li><strong>gnupg-agent</strong>: GNU privacy guard - password agent</li>
+            <li><strong>grc</strong>: Generic colouriser for everything</li>
+            <li><strong>htop</strong>: An interactive process viewer</li>
+            <li><strong>btop</strong>: A resource monitor that shows usage and stats for processor, memory, disks, network and processes</li>
+            <li><strong>iftop</strong>: A tool to display bandwidth usage on an interface</li>
+            <li><strong>iotop</strong>: A tool to display I/O usage by processes</li>
+            <li><strong>iperf3</strong>: A tool for active measurements of the maximum achievable bandwidth on IP networks</li>
+            <li><strong>ipset</strong>: A tool to manage IP sets in the Linux kernel</li>
+            <li><strong>iptraf-ng</strong>: An interactive colorful IP LAN monitor</li>
+            <li><strong>mlocate</strong>: A tool to find files by name quickly</li>
+            <li><strong>msr-tools</strong>: Tools for accessing CPU model-specific registers</li>
+            <li><strong>nano</strong>: A small, friendly text editor</li>
+            <li><strong>net-tools</strong>: A collection of programs that form the base set of the NET-3 networking distribution for the Linux operating system</li>
+            <li><strong>omping</strong>: An open multicast ping tool</li>
+            <li><strong>software-properties-common</strong>: Provides an abstraction of the used apt repositories</li>
+            <li><strong>sshpass</strong>: A tool for non-interactive ssh password authentication</li>
+            <li><strong>tmux</strong>: A terminal multiplexer</li>
+            <li><strong>unzip</strong>: A tool for extracting and viewing files in .zip archives</li>
+            <li><strong>vim</strong> and <strong>vim-nox</strong>: A highly configurable text editor</li>
+            <li><strong>wget</strong>: A utility for non-interactive download of files from the Web</li>
+            <li><strong>whois</strong>: A client for the whois directory service</li>
+            <li><strong>zip</strong>: A compression and file packaging utility</li>
+            <li><strong>libguestfs-tools</strong>: A set of tools for accessing and modifying virtual machine disk images</li>
+          </ul>
+        </OptimizationStep>
 
-        {/* Optimization 2 */}
-        <div className="relative">
-          <div className="flex items-start">
-            <div className="flex-shrink-0 flex flex-col items-center mr-4">
-              <div className="rounded-full bg-blue-500 text-white w-10 h-10 flex items-center justify-center font-bold text-lg">
-                2
-              </div>
-              <div className="h-full w-0.5 bg-blue-200 mt-2"></div>
-            </div>
-            <div className="flex-grow">
-              <h3 className="text-xl font-semibold mb-4">Skip Downloading Additional Languages</h3>
-              <section className="mb-8">
-                <p className="mb-4">
-                  This optimization configures APT to skip downloading additional language packages, which can save disk
-                  space and speed up package operations.
-                </p>
-                <p className="mb-4">
-                  <strong>Why it's beneficial:</strong> By skipping unnecessary language packages, you can reduce disk
-                  usage and improve the speed of package management operations. This is particularly useful in server
-                  environments where multiple language support is often not required.
-                </p>
-                <h4 className="text-lg font-semibold mb-2">To apply this optimization manually, run:</h4>
-                <CopyableCode
-                  code={`
+        <OptimizationStep
+          number={2}
+          title="Skip Downloading Additional Languages"
+          description="This optimization configures APT to skip downloading additional language packages, which can save disk space and speed up package operations."
+          benefits="By skipping unnecessary language packages, you can reduce disk usage and improve the speed of package management operations. This is particularly useful in server environments where multiple language support is often not required."
+          code={`
 # Configure APT to skip downloading additional languages
 echo 'Acquire::Languages "none";' | sudo tee /etc/apt/apt.conf.d/99-disable-translations
-            `}
-                />
-              </section>
-            </div>
-          </div>
-        </div>
+          `}
+        />
 
-        {/* Optimization 3 */}
-        <div className="relative">
-          <div className="flex items-start">
-            <div className="flex-shrink-0 flex flex-col items-center mr-4">
-              <div className="rounded-full bg-blue-500 text-white w-10 h-10 flex items-center justify-center font-bold text-lg">
-                3
-              </div>
-              <div className="h-full w-0.5 bg-blue-200 mt-2"></div>
-            </div>
-            <div className="flex-grow">
-              <h3 className="text-xl font-semibold mb-4">Synchronize Time Automatically</h3>
-              <section className="mb-8">
-                <p className="mb-4">
-                  This optimization configures the system to automatically synchronize its time, ensuring accurate
-                  timekeeping.
-                </p>
-                <p className="mb-4">
-                  <strong>Why it's beneficial:</strong> Accurate timekeeping is crucial for many system operations, log
-                  consistency, and proper functioning of time-sensitive applications. Automatic synchronization ensures
-                  your Proxmox VE system maintains the correct time without manual intervention.
-                </p>
-                <h4 className="text-lg font-semibold mb-2">To apply this optimization manually, run:</h4>
-                <CopyableCode
-                  code={`
+        <OptimizationStep
+          number={3}
+          title="Synchronize Time Automatically"
+          description="This optimization configures the system to automatically synchronize its time, ensuring accurate timekeeping."
+          benefits="Accurate timekeeping is crucial for many system operations, log consistency, and proper functioning of time-sensitive applications. Automatic synchronization ensures your Proxmox VE system maintains the correct time without manual intervention."
+          code={`
 # Note: To set timezone automatically based on IP, you can use:
 IP=$(dig +short myip.opendns.com @resolver1.opendns.com)
 TIMEZONE=$(curl -s "https://ipapi.co/$IP/timezone")
 sudo timedatectl set-timezone "$TIMEZONE"
-            `}
-                />
-              </section>
-            </div>
-          </div>
-        </div>
+          `}
+        />
 
-        {/* Optimization 4 */}
-        <div className="relative">
-          <div className="flex items-start">
-            <div className="flex-shrink-0 flex flex-col items-center mr-4">
-              <div className="rounded-full bg-blue-500 text-white w-10 h-10 flex items-center justify-center font-bold text-lg">
-                4
-              </div>
-            </div>
-            <div className="flex-grow">
-              <h3 className="text-xl font-semibold mb-4">Update and Upgrade System</h3>
-              <section className="mb-8">
-                <p className="mb-4">
-                  This optimization updates the system's package lists, upgrades installed packages, and configures
-                  Proxmox repositories. It also includes additional steps to properly set up Debian repositories and
-                  disable certain warnings.
-                </p>
-                <p className="mb-4">
-                  <strong>Why it's beneficial:</strong> Keeping your system up-to-date is essential for security,
-                  stability, and performance. This optimization ensures you have the latest patches and features, while
-                  also configuring the correct repositories for Proxmox VE, enabling access to necessary updates and
-                  tools.
-                </p>
-                <h4 className="text-lg font-semibold mb-2">To apply this optimization manually, run:</h4>
-                <CopyableCode
-                  code={`
+        <OptimizationStep
+          number={4}
+          title="Update and Upgrade System"
+          description="This optimization updates the system's package lists, upgrades installed packages, and configures Proxmox repositories. It also includes additional steps to properly set up Debian repositories and disable certain warnings."
+          benefits="Keeping your system up-to-date is essential for security, stability, and performance. This optimization ensures you have the latest patches and features, while also configuring the correct repositories for Proxmox VE, enabling access to necessary updates and tools."
+          code={`
 # Disable enterprise Proxmox repository
 if [ -f /etc/apt/sources.list.d/pve-enterprise.list ]; then
   sudo sed -i 's/^deb/#deb/g' /etc/apt/sources.list.d/pve-enterprise.list
@@ -305,12 +159,8 @@ pveam update
 
 # Install additional packages
 sudo apt-get install -y zfsutils-linux proxmox-backup-restore-image chrony
-            `}
-                />
-              </section>
-            </div>
-          </div>
-        </div>
+          `}
+        />
       </div>
 
       <section className="mt-12 p-4 bg-blue-100 rounded-md">
@@ -325,3 +175,23 @@ sudo apt-get install -y zfsutils-linux proxmox-backup-restore-image chrony
   )
 }
 
+function OptimizationStep({ number, title, description, benefits, code, children }) {
+  return (
+    <div className="bg-white shadow-md rounded-lg p-6">
+      <div className="flex items-center mb-4">
+        <div className="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold mr-3">
+          {number}
+        </div>
+        <h3 className="text-xl font-semibold">{title}</h3>
+      </div>
+      <p className="mb-4">{description}</p>
+      <p className="mb-4">
+        <strong>Why it's beneficial:</strong> {benefits}
+      </p>
+      {children}
+      <h4 className="text-lg font-semibold mb-2">To apply this optimization manually, run:</h4>
+      <CopyableCode code={code} />
+    </div>
+  )
+}
+