diff --git a/retoors/static/css/components/content_pages.css b/retoors/static/css/components/content_pages.css
new file mode 100644
index 0000000..46d2a1c
--- /dev/null
+++ b/retoors/static/css/components/content_pages.css
@@ -0,0 +1,244 @@
+/* General styles for hero sections on content pages */
+.hero-intro {
+    text-align: center;
+    padding: 3rem 1rem;
+    background-color: var(--card-background);
+    margin-bottom: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.hero-headline {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.8rem;
+}
+
+.hero-subheadline {
+    font-size: 1.2rem;
+    color: var(--light-text-color);
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+/* Pricing Plans Section */
+.pricing-plans {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.plan-card {
+    background-color: var(--card-background);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.plan-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px var(--shadow-color);
+}
+
+.plan-card.featured {
+    border: 2px solid var(--accent-color);
+    box-shadow: 0 6px 15px rgba(0, 188, 212, 0.2);
+}
+
+.plan-card h2 {
+    font-size: 1.8rem;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+}
+
+.plan-card .price {
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--accent-color);
+    margin-bottom: 1.5rem;
+}
+
+.plan-card .price span {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--light-text-color);
+}
+
+.plan-card ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 2rem;
+    flex-grow: 1;
+}
+
+.plan-card ul li {
+    margin-bottom: 0.8rem;
+    color: var(--light-text-color);
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.plan-card ul li i {
+    color: var(--accent-color);
+    margin-right: 0.5rem;
+}
+
+.plan-card .btn-primary,
+.plan-card .btn-outline {
+    width: 100%;
+    padding: 0.8rem 1.5rem;
+    font-size: 1.1rem;
+    border-radius: 5px;
+}
+
+/* Security Features Section */
+.security-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.feature-card {
+    background-color: var(--card-background);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+    padding: 2rem;
+    text-align: center;
+    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px var(--shadow-color);
+}
+
+.feature-card i {
+    font-size: 3rem; /* Placeholder for icon size */
+    color: var(--accent-color);
+    margin-bottom: 1rem;
+    display: block;
+}
+
+.feature-card h2 {
+    font-size: 1.5rem;
+    color: var(--text-color);
+    margin-bottom: 0.8rem;
+}
+
+.feature-card p {
+    color: var(--light-text-color);
+    font-size: 1rem;
+}
+
+/* FAQ Section */
+.faq-section {
+    background-color: var(--card-background);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+    padding: 2rem;
+    margin-bottom: 2rem;
+}
+
+.faq-section h2 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: var(--text-color);
+}
+
+.faq-item {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.faq-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.faq-item h3 {
+    font-size: 1.2rem;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+}
+
+.faq-item p {
+    color: var(--light-text-color);
+    font-size: 1rem;
+}
+
+/* CTA Section */
+.cta-section {
+    text-align: center;
+    padding: 3rem 1rem;
+    background-color: var(--card-background);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+.cta-section h2 {
+    font-size: 2rem;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+}
+
+.cta-section p {
+    font-size: 1.1rem;
+    color: var(--light-text-color);
+    max-width: 700px;
+    margin: 0 auto 1.5rem auto;
+}
+
+.cta-section .btn-primary {
+    font-size: 1.2rem;
+    padding: 1rem 2rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .hero-headline {
+        font-size: 2rem;
+    }
+
+    .hero-subheadline {
+        font-size: 1rem;
+    }
+
+    .pricing-plans,
+    .security-features {
+        grid-template-columns: 1fr; /* Stack cards on smaller screens */
+    }
+
+    .plan-card,
+    .feature-card {
+        padding: 1.5rem;
+    }
+
+    .plan-card h2,
+    .feature-card h2 {
+        font-size: 1.6rem;
+    }
+
+    .plan-card .price {
+        font-size: 2.5rem;
+    }
+
+    .cta-section h2 {
+        font-size: 1.8rem;
+    }
+
+    .cta-section p {
+        font-size: 1rem;
+    }
+}
diff --git a/retoors/static/css/components/footer.css b/retoors/static/css/components/footer.css
new file mode 100644
index 0000000..f89b4ca
--- /dev/null
+++ b/retoors/static/css/components/footer.css
@@ -0,0 +1,14 @@
+footer {
+    background-color: var(--card-background); /* Consistent with header */
+    color: var(--light-text-color); /* Subtle text color */
+    padding: 1.5rem 2rem;
+    text-align: center;
+    border-top: 1px solid var(--border-color); /* Separator from content */
+    margin-top: auto; /* Push footer to the bottom */
+    box-shadow: 0 -2px 4px var(--shadow-color); /* Subtle shadow upwards */
+}
+
+footer p {
+    margin: 0; /* Remove default paragraph margin */
+    font-size: 0.9rem;
+}
diff --git a/retoors/templates/pages/pricing.html b/retoors/templates/pages/pricing.html
new file mode 100644
index 0000000..256cb4c
--- /dev/null
+++ b/retoors/templates/pages/pricing.html
@@ -0,0 +1,61 @@
+{% extends "layouts/base.html" %}
+
+{% block title %}Pricing - Retoor's Cloud Solutions{% endblock %}
+
+{% block content %}
+<main>
+    <section class="hero-intro">
+        <h1 class="hero-headline">Flexible Pricing for Every Need</h1>
+        <p class="hero-subheadline">Find the perfect plan for your business, team, or individual use.</p>
+    </section>
+
+    <section class="pricing-plans">
+        <div class="plan-card">
+            <h2>Basic Plan</h2>
+            <p class="price">$9.99<span>/month</span></p>
+            <ul>
+                <li><i class="icon-check"></i> 100 GB Storage</li>
+                <li><i class="icon-check"></i> Basic File Sharing</li>
+                <li><i class="icon-check"></i> Email Support</li>
+            </ul>
+            <a href="/register" class="btn-primary">Get Started</a>
+        </div>
+
+        <div class="plan-card featured">
+            <h2>Pro Plan</h2>
+            <p class="price">$19.99<span>/month</span></p>
+            <ul>
+                <li><i class="icon-check"></i> 1 TB Storage</li>
+                <li><i class="icon-check"></i> Advanced File Sharing</li>
+                <li><i class="icon-check"></i> Priority Email Support</li>
+                <li><i class="icon-check"></i> Version History</li>
+            </ul>
+            <a href="/register" class="btn-primary">Choose Pro</a>
+        </div>
+
+        <div class="plan-card">
+            <h2>Enterprise Plan</h2>
+            <p class="price">Custom</p>
+            <ul>
+                <li><i class="icon-check"></i> Unlimited Storage</li>
+                <li><i class="icon-check"></i> Dedicated Support</li>
+                <li><i class="icon-check"></i> Advanced Security Features</li>
+                <li><i class="icon-check"></i> Custom Integrations</li>
+            </ul>
+            <a href="/support" class="btn-outline">Contact Sales</a>
+        </div>
+    </section>
+
+    <section class="faq-section">
+        <h2>Frequently Asked Questions</h2>
+        <div class="faq-item">
+            <h3>What payment methods do you accept?</h3>
+            <p>We accept all major credit cards, PayPal, and bank transfers for annual plans.</p>
+        </div>
+        <div class="faq-item">
+            <h3>Can I change my plan later?</h3>
+            <p>Yes, you can upgrade or downgrade your plan at any time from your dashboard.</p>
+        </div>
+    </section>
+</main>
+{% endblock %}
\ No newline at end of file
diff --git a/retoors/templates/pages/security.html b/retoors/templates/pages/security.html
new file mode 100644
index 0000000..763fa61
--- /dev/null
+++ b/retoors/templates/pages/security.html
@@ -0,0 +1,56 @@
+{% extends "layouts/base.html" %}
+
+{% block title %}Security - Retoor's Cloud Solutions{% endblock %}
+
+{% block content %}
+<main>
+    <section class="hero-intro">
+        <h1 class="hero-headline">Bank-Grade Security for Your Data</h1>
+        <p class="hero-subheadline">Protecting your valuable information with advanced measures and unwavering commitment.</p>
+    </section>
+
+    <section class="security-features">
+        <div class="feature-card">
+            <i class="icon-encryption"></i> {# Placeholder for an encryption icon #}
+            <h2>End-to-End Encryption</h2>
+            <p>Your data is encrypted at rest and in transit using industry-leading AES-256 encryption protocols.</p>
+        </div>
+
+        <div class="feature-card">
+            <i class="icon-access-control"></i> {# Placeholder for an access control icon #}
+            <h2>Granular Access Controls</h2>
+            <p>Manage who has access to what with detailed permissions and user roles, ensuring data privacy.</p>
+        </div>
+
+        <div class="feature-card">
+            <i class="icon-compliance"></i> {# Placeholder for a compliance icon #}
+            <h2>Regulatory Compliance</h2>
+            <p>We adhere to global compliance standards like GDPR, HIPAA, and ISO 27001 to meet your industry needs.</p>
+        </div>
+
+        <div class="feature-card">
+            <i class="icon-backup"></i> {# Placeholder for a backup icon #}
+            <h2>Automated Backups & Recovery</h2>
+            <p>Your data is continuously backed up and easily recoverable, protecting against data loss.</p>
+        </div>
+
+        <div class="feature-card">
+            <i class="icon-monitoring"></i> {# Placeholder for an monitoring icon #}
+            <h2>24/7 Threat Monitoring</h2>
+            <p>Our systems are constantly monitored for suspicious activity, ensuring rapid response to threats.</p>
+        </div>
+
+        <div class="feature-card">
+            <i class="icon-audits"></i> {# Placeholder for an audit icon #}
+            <h2>Regular Security Audits</h2>
+            <p>Independent third-party audits regularly verify the effectiveness of our security measures.</p>
+        </div>
+    </section>
+
+    <section class="cta-section">
+        <h2>Have More Security Questions?</h2>
+        <p>Our team is ready to provide detailed answers and discuss your specific security requirements.</p>
+        <a href="/support" class="btn-primary">Contact Support</a>
+    </section>
+</main>
+{% endblock %}
\ No newline at end of file