diff --git a/README.md b/README.md
index 02d9f4b..7471774 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ A clean, modern Jekyll theme optimized for technical blogs and documentation sit
 - **Clean & Modern Design** - Minimal, distraction-free reading experience
 - **Responsive Layout** - Optimized for all devices from mobile to desktop
 - **Dark Mode Support** - Built-in dark mode toggle option with logo treatment options
+- **Social Media Inspired Layout** - **New!** Modern home-v2 layout with Instagram-style stories and engaging post cards
 - **Comment System** - Support for Giscus (GitHub Discussions) comments
 - **Code Highlighting** - Beautiful syntax highlighting for technical content
 - **Table of Contents** - Automatically generated for longer articles
diff --git a/_config.yml b/_config.yml
index 3bb6a5a..fe1a839 100644
--- a/_config.yml
+++ b/_config.yml
@@ -99,6 +99,11 @@ homepage:
     enabled: true
     title: "Latest Articles"
     excerpt_length: 30
+    
+  # Site statistics widget
+  stats_widget:
+    enabled: true
+    title: "Site Statistics"
 
 # Favicon configuration
 favicon:
@@ -118,6 +123,9 @@ navigation:
   - title: Home
     url: /
     icon: home # Feather icon name
+  - title: V2
+    url: /v2
+    icon: code
   - title: Documentation
     url: /docs
     icon: book-open
diff --git a/_includes/giscus.html b/_includes/giscus.html
index d9a5b12..1666c73 100644
--- a/_includes/giscus.html
+++ b/_includes/giscus.html
@@ -1,5 +1,5 @@
 {% if site.giscus.enabled %}
-<div class="comments-wrapper">
+<div class="comments-wrapper" id="comments-wrapper">
   <h2 class="comments-heading">Comments</h2>
   <div class="giscus-container">
     <script src="https://giscus.app/client.js"
diff --git a/_includes/post-feed-v2.html b/_includes/post-feed-v2.html
new file mode 100644
index 0000000..f59496f
--- /dev/null
+++ b/_includes/post-feed-v2.html
@@ -0,0 +1,169 @@
+{% assign display = include.display | default: 'flex' %}
+<div class="posts-feed" id="{{ include.id | default: 'posts-feed' }}" style="display: {{ display }};">
+  {% for post in include.posts %}
+  <article class="post-card" data-categories="{% for cat in post.categories %}{{ cat | slugify }} {% endfor %}"
+    data-featured="{% if post.featured %}true{% else %}false{% endif %}" data-post-id="{{ forloop.index }}">
+
+    <!-- Post Header -->
+    <div class="post-header">
+      <div class="author-info">
+        <div class="author-avatar">
+          <img src="{{ post.author_avatar | relative_url }}" alt="{{ post.author | default: site.author }}"
+            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+          <div class="avatar-placeholder" style="display: none;">
+            {{ post.author | default: site.author | slice: 0 | upcase }}
+          </div>
+        </div>
+        <div class="author-details">
+          <span class="author-name">{{ post.author | default: site.author }}</span>
+          <div class="post-meta">
+            <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%b %d, %Y" }}</time>
+            {% if post.categories.size > 0 %}
+            <span class="category">{{ post.categories.first }}</span>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      {% if post.featured %}
+      <div class="featured-badge" title="Featured Post">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.46,13.97L5.82,21L12,17.27Z" />
+        </svg>
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Post Content -->
+    <div class="post-content">
+      <h2 class="post-title">
+        <a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+      </h2>
+
+      {% if post.image %}
+      <div class="post-image">
+        <a href="{{ post.url | relative_url }}">
+          <img src="{{ '/assets/images/' | append: post.image | relative_url }}" alt="{{ post.title }}"
+            loading="{% if forloop.index <= 2 %}eager{% else %}lazy{% endif %}" />
+        </a>
+      </div>
+      {% endif %}
+
+      <div class="post-excerpt">
+        {{ post.excerpt | strip_html | truncatewords: 25 }}
+      </div>
+
+      {% if post.tags.size > 0 %}
+      <div class="post-tags">
+        {% for tag in post.tags limit:3 %}
+        <a href="{{ '/tags/#' | append: tag | slugify | relative_url }}" class="tag">#{{ tag }}</a>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Post Actions -->
+    <div class="post-actions">
+      <div class="action-buttons">
+        <a href="{{ post.url | relative_url }}" class="action-btn read-btn" aria-label="Read post">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+          <span>Read Article</span>
+        </a>
+
+        <a href="{{ post.url | relative_url }}#comments-wrapper" class="action-btn comment-btn"
+          aria-label="View comments">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+          <span>Comments</span>
+        </a>
+
+        <div class="share-dropdown">
+          <button class="action-btn share-btn" aria-label="Share post" aria-haspopup="true" aria-expanded="false"
+            aria-controls="share-menu-options" tabindex="0">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              aria-hidden="true">
+              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+              <polyline points="16,6 12,2 8,6" />
+              <line x1="12" y1="2" x2="12" y2="15" />
+            </svg>
+            <span>Share</span>
+          </button>
+          <div id="share-menu-options" class="share-menu" role="menu" aria-orientation="horizontal"
+            aria-label="Share options">
+            <a href="https://twitter.com/intent/tweet?url={{ site.url }}{{ post.url }}&text={{ post.title | uri_escape }}"
+              target="_blank" rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path
+                  d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z">
+                </path>
+              </svg>
+              Twitter
+            </a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ post.url }}" target="_blank"
+              rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+              </svg>
+              Facebook
+            </a>
+            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}{{ post.url }}" target="_blank"
+              rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                <rect x="2" y="9" width="4" height="12"></rect>
+                <circle cx="4" cy="4" r="2"></circle>
+              </svg>
+              LinkedIn
+            </a>
+            <a href="https://www.reddit.com/submit?url={{ site.url }}{{ post.url }}&title={{ post.title | uri_escape }}"
+              target="_blank" rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="8" r="7" />
+                <path d="M10.2 14c-.5 0-.8.3-.8.8s.3.8.8.8.8-.3.8-.8-.3-.8-.8-.8z" />
+                <path d="M13.8 14c-.5 0-.8.3-.8.8s.3.8.8.8.8-.3.8-.8-.3-.8-.8-.8z" />
+                <path d="M14.5 11.5c-.5 0-.8-.3-.8-.7s.3-.8.8-.8.8.3.8.8-.3.7-.8.7z" />
+                <path d="M9.5 11.5c-.5 0-.8-.3-.8-.7s.3-.8.8-.8.8.3.8.8-.3.7-.8.7z" />
+                <path d="M12 18c3.5 0 6.5-2 6.5-4.5S15.5 9 12 9s-6.5 2-6.5 4.5S8.5 18 12 18z" />
+                <path d="M19 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+                <path d="M5 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+              </svg>
+              Reddit
+            </a>
+            <a href="mailto:?subject={{ post.title | uri_escape }}&body={{ site.url }}{{ post.url }}"
+              class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                <polyline points="22,6 12,13 2,6"></polyline>
+              </svg>
+              Email
+            </a>
+            <button
+              onclick="navigator.clipboard.writeText('{{ site.url }}{{ post.url }}'); this.querySelector('span').textContent='Copied!'; setTimeout(() => this.querySelector('span').textContent='Copy Link', 1500);"
+              class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+              <span>Copy Link</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="post-meta-info">
+        <span class="reading-time">
+          {% if post.reading_time %}
+          {{ post.reading_time }} min read
+          {% else %}
+          {{ post.content | number_of_words | divided_by: 200 | plus: 1 }} min read
+          {% endif %}
+        </span>
+      </div>
+    </div>
+  </article>
+  {% endfor %}
+</div>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index fe93be9..773cb9e 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -112,5 +112,8 @@
   
   <script src="{{ "/assets/js/main.js" | relative_url }}" defer></script>
   <script src="{{ "/assets/js/search.js" | relative_url }}" defer></script>
+  {% if page.layout == 'home-v2' or layout.name == 'home-v2' %}
+    <script src="{{ "/assets/js/home-v2.js" | relative_url }}" defer></script>
+  {% endif %}
 </body>
 </html>
\ No newline at end of file
diff --git a/_layouts/home-v2.html b/_layouts/home-v2.html
new file mode 100644
index 0000000..90c75c6
--- /dev/null
+++ b/_layouts/home-v2.html
@@ -0,0 +1,337 @@
+---
+layout: default
+---
+
+<div class="home-v2">
+  <!-- Stories-style Category Navigation -->
+  <section class="stories-section">
+    <div class="stories-container">
+      <a href="{{ '/' | relative_url }}" class="story-item active" data-category="all">
+        <div class="story-avatar">
+          <div class="avatar-ring">
+            <div class="story-placeholder">
+              <img src="{{ '/assets/images/icons/default-category.svg' | relative_url }}" 
+                   alt="All Categories" 
+                   style="width: 100%; height: 100%; object-fit: cover;" />
+            </div>
+          </div>
+        </div>
+        <span class="story-label">All</span>
+      </a>
+      
+      {% assign categories_list = site.categories %}
+      {% for category in categories_list limit:8 %}
+        {% comment %}Find the most recent post with an image in this category{% endcomment %}
+        {% assign category_posts = category[1] | where_exp: "post", "post.image" %}
+        {% assign latest_post = category_posts | first %}
+        {% assign category_slug = category[0] | slugify %}
+        
+        <a href="{{ '/categories/#' | append: category_slug | relative_url }}" class="story-item" data-category="{{ category_slug }}">
+          <div class="story-avatar">
+            <div class="avatar-ring">
+              {% if latest_post.image %}
+                <img src="{{ '/assets/images/' | append: latest_post.image | relative_url }}" 
+                     alt="{{ category[0] }}" 
+                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+              {% else %}
+                <img src="{{ '/assets/images/categories/' | append: category_slug | append: '.jpg' | relative_url }}" 
+                     alt="{{ category[0] }}" 
+                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+              {% endif %}
+              <div class="story-placeholder" style="display: none;">
+                <img src="{{ '/assets/images/icons/default-category.svg' | relative_url }}" 
+                     alt="{{ category[0] }} category" 
+                     style="width: 100%; height: 100%; object-fit: cover;" />
+              </div>
+            </div>
+          </div>
+          <span class="story-label">{{ category[0] }}</span>
+        </a>
+      {% endfor %}
+    </div>
+  </section>
+
+  <!-- Main Feed Container -->
+  <div class="feed-container">
+    <!-- Main Content Area -->
+    <main class="main-content">
+      <!-- Filter and View Controls -->
+      <div class="feed-controls">
+        <div class="filter-tabs">
+          <button class="filter-tab active" data-filter="all">All Posts</button>
+          <button class="filter-tab" data-filter="featured">Featured</button>
+        </div>
+        <div class="view-toggles">
+          <button class="view-toggle active" data-view="feed" title="Feed View">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+            </svg>
+          </button>
+          <button class="view-toggle" data-view="grid" title="Grid View">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Posts Feed -->
+      {% if paginator %}
+      {% assign posts_to_show = paginator.posts %}
+      {% else %}
+      {% assign posts_to_show = site.posts %}
+      {% endif %}
+      {% include post-feed-v2.html posts=posts_to_show %}
+
+      <!-- Fetured Posts Section -->
+      {% assign posts_to_show = site.posts | where: "featured", true %}
+      {% include post-feed-v2.html posts=posts_to_show id="posts-featured" display="none" %}
+
+      <!-- Pagination Navigation -->
+      {% if paginator %}
+      <div class="pagination-container">
+        <nav class="pagination" aria-label="Pagination Navigation">
+          {% if paginator.previous_page %}
+            <a href="{{ paginator.previous_page_path | relative_url }}" class="pagination-btn prev-btn" aria-label="Previous page">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="15,18 9,12 15,6"></polyline>
+              </svg>
+              <span>Previous</span>
+            </a>
+          {% else %}
+            <span class="pagination-btn prev-btn disabled" aria-hidden="true">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="15,18 9,12 15,6"></polyline>
+              </svg>
+              <span>Previous</span>
+            </span>
+          {% endif %}
+
+          <div class="pagination-pages">
+            {% for page in (1..paginator.total_pages) %}
+              {% if page == paginator.page %}
+                <span class="pagination-page current" aria-current="page">{{ page }}</span>
+              {% elsif page == 1 %}
+                <a href="{{ '/' | relative_url }}" class="pagination-page" aria-label="Page {{ page }}">{{ page }}</a>
+              {% else %}
+                <a href="{{ site.paginate_path | replace: ':num', page | relative_url }}" class="pagination-page" aria-label="Page {{ page }}">{{ page }}</a>
+              {% endif %}
+            {% endfor %}
+          </div>
+
+          {% if paginator.next_page %}
+            <a href="{{ paginator.next_page_path | relative_url }}" class="pagination-btn next-btn" aria-label="Next page">
+              <span>Next</span>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="9,18 15,12 9,6"></polyline>
+              </svg>
+            </a>
+          {% else %}
+            <span class="pagination-btn next-btn disabled" aria-hidden="true">
+              <span>Next</span>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="9,18 15,12 9,6"></polyline>
+              </svg>
+            </span>
+          {% endif %}
+        </nav>
+
+        <div class="pagination-info">
+          <span>Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
+          <span class="pagination-separator">•</span>
+          <span>{{ paginator.posts.size }} of {{ paginator.total_posts }} posts</span>
+        </div>
+      </div>
+      {% endif %}
+    </main>
+
+    <!-- Sidebar -->
+    <aside class="social-sidebar">
+    <!-- Profile Card -->
+    <div class="profile-card">
+      <div class="profile-avatar">
+        <img src="{{ site.author_avatar | relative_url }}" 
+             alt="{{ site.homepage.about_widget.title | default: site.author | default: site.title }}"
+             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+        <div class="avatar-placeholder" style="display: none;">
+          {{ site.homepage.about_widget.title | default: site.author | default: site.title | slice: 0 | upcase }}
+        </div>
+      </div>
+      <div class="profile-info">
+        <h3 class="profile-name">{{ site.homepage.about_widget.title | default: site.author | default: site.title }}</h3>
+        <p class="profile-bio">{{ site.homepage.about_widget.content | default: site.description | truncatewords: 15 }}</p>
+        {% if site.homepage.about_widget.enabled and site.homepage.about_widget.link_url %}
+        <a href="{{ site.homepage.about_widget.link_url | relative_url }}" class="profile-link">{{ site.homepage.about_widget.link_text | default: "Learn more →" }}</a>
+        {% endif %}
+        <div class="profile-stats">
+          <div class="stat">
+            <span class="stat-number">{{ site.posts.size }}</span>
+            <span class="stat-label">Posts</span>
+          </div>
+          <div class="stat">
+            <span class="stat-number">{{ site.categories.size }}</span>
+            <span class="stat-label">Categories</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- All Categories -->
+    <div class="sidebar-widget trending-widget">
+      <h3 class="widget-title">All Categories</h3>
+      <div class="trending-list">
+        {% comment %}Create sortable category data{% endcomment %}
+        {% assign category_list = "" | split: "" %}
+        {% for category in site.categories %}
+          {% assign post_count = category[1].size %}
+          {% assign padded_count = post_count %}
+          {% if post_count < 10 %}
+            {% assign padded_count = "0" | append: post_count %}
+          {% endif %}
+          {% assign category_data = padded_count | append: "|" | append: category[0] %}
+          {% assign category_list = category_list | push: category_data %}
+        {% endfor %}
+        {% assign sorted_categories = category_list | sort | reverse %}
+        
+        {% assign category_counter = 0 %}
+        {% for category_item in sorted_categories %}
+          {% assign category_counter = category_counter | plus: 1 %}
+          {% assign parts = category_item | split: "|" %}
+          {% assign post_count = parts[0] | plus: 0 %}
+          {% assign category_name = parts[1] | slugify %}
+          <a href="{{ '/categories/#' | append: category_name | relative_url }}" class="trending-item">
+            <span class="trending-number">{{ category_counter }}</span>
+            <span class="trending-name">{{ category_name }}</span>
+            <span class="trending-count">{{ post_count }} posts</span>
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+
+    <!-- Popular Tags -->
+    <div class="sidebar-widget tags-widget">
+      <h3 class="widget-title">Popular Tags</h3>
+      <div class="tags-cloud">
+        {% comment %}Create sortable tag data{% endcomment %}
+        {% assign tag_list = "" | split: "" %}
+        {% for tag in site.tags %}
+          {% assign post_count = tag[1].size %}
+          {% assign padded_count = post_count %}
+          {% if post_count < 10 %}
+            {% assign padded_count = "0" | append: post_count %}
+          {% endif %}
+          {% assign tag_data = padded_count | append: "|" | append: tag[0] %}
+          {% assign tag_list = tag_list | push: tag_data %}
+        {% endfor %}
+        {% assign sorted_tags = tag_list | sort | reverse %}
+        
+        {% for tag_item in sorted_tags limit:15 %}
+          {% assign parts = tag_item | split: "|" %}
+          {% assign post_count = parts[0] | plus: 0 %}
+          {% assign tag_name = parts[1] | slugify %}
+          {% assign tag_display = parts[1] %}
+          <a href="{{ '/tags/#' | append: tag_name | relative_url }}" class="tag-item">
+            <span class="tag-hash">#</span>{{ tag_display }}
+            <span class="tag-count">{{ post_count }}</span>
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+
+    <!-- Site Statistics -->
+    {% if site.homepage.stats_widget.enabled %}
+    <div class="sidebar-widget stats-widget">
+      <h3 class="widget-title">{{ site.homepage.stats_widget.title | default: "Site Statistics" }}</h3>
+      <div class="stats-grid">
+        {% comment %}Calculate total words{% endcomment %}
+        {% assign total_words = 0 %}
+        {% assign total_reading_time = 0 %}
+        {% for post in site.posts %}
+          {% assign words = post.content | strip_html | number_of_words %}
+          {% assign total_words = total_words | plus: words %}
+          {% assign reading_time = words | divided_by: 200 | plus: 1 %}
+          {% assign total_reading_time = total_reading_time | plus: reading_time %}
+        {% endfor %}
+        
+        {% comment %}Calculate site age{% endcomment %}
+        {% assign first_post = site.posts | last %}
+        {% assign first_date = first_post.date | date: "%s" %}
+        {% assign current_date = site.time | date: "%s" %}
+        {% assign days_active = current_date | minus: first_date | divided_by: 86400 %}
+        
+        <div class="stat-item">
+          <div class="stat-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+              <polyline points="14,2 14,8 20,8"></polyline>
+              <line x1="16" y1="13" x2="8" y2="13"></line>
+              <line x1="16" y1="17" x2="8" y2="17"></line>
+              <polyline points="10,9 9,9 8,9"></polyline>
+            </svg>
+          </div>
+          <div class="stat-details">
+            <span class="stat-number">{{ total_words | divided_by: 1000 }}K</span>
+            <span class="stat-label">Words Published</span>
+          </div>
+        </div>
+        
+        <div class="stat-item">
+          <div class="stat-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12,6 12,12 16,14"></polyline>
+            </svg>
+          </div>
+          <div class="stat-details">
+            <span class="stat-number">{{ total_reading_time }}</span>
+            <span class="stat-label">Minutes to Read All</span>
+          </div>
+        </div>
+        
+        <div class="stat-item">
+          <div class="stat-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="16" y1="2" x2="16" y2="6"></line>
+              <line x1="8" y1="2" x2="8" y2="6"></line>
+              <line x1="3" y1="10" x2="21" y2="10"></line>
+            </svg>
+          </div>
+          <div class="stat-details">
+            <span class="stat-number">{{ days_active }}</span>
+            <span class="stat-label">Days Active</span>
+          </div>
+        </div>
+        
+        <div class="stat-item">
+          <div class="stat-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="22,12 18,12 15,21 9,3 6,12 2,12"></polyline>
+            </svg>
+          </div>
+          <div class="stat-details">
+            <span class="stat-number">{{ total_words | divided_by: site.posts.size | round }}</span>
+            <span class="stat-label">Avg Words per Post</span>
+          </div>
+        </div>
+        
+        <div class="stat-item">
+          <div class="stat-icon">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M9 11H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h4l3 3h4a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-4l-3 3z"></path>
+              <path d="M22 9l-10 8"></path>
+              <path d="M12 17l10-8"></path>
+            </svg>
+          </div>
+          <div class="stat-details">
+            <span class="stat-number">{{ first_post.date | date: "%b %Y" }}</span>
+            <span class="stat-label">First Post</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endif %}
+    </aside>
+  </div>
+ 
+</div>
diff --git a/_posts/2025-05-12-welcome-to-arsxy-theme.md b/_posts/2025-05-12-welcome-to-arsxy-theme.md
index 5e9de10..be19792 100644
--- a/_posts/2025-05-12-welcome-to-arsxy-theme.md
+++ b/_posts/2025-05-12-welcome-to-arsxy-theme.md
@@ -6,7 +6,6 @@ categories: Demo
 tags: jekyll theme demo markdown
 author: Awcodify
 image: theme-demo.webp
-featured: true
 ---
 
 Welcome to **Arsxy Theme** for Jekyll! This is a sample post that showcases the theme's features and styling options. If you're seeing this, you've successfully installed the theme.
diff --git a/_posts/2025-05-13-advanced-arsxy-theme-features.md b/_posts/2025-05-13-advanced-arsxy-theme-features.md
index c38a07e..2347571 100644
--- a/_posts/2025-05-13-advanced-arsxy-theme-features.md
+++ b/_posts/2025-05-13-advanced-arsxy-theme-features.md
@@ -6,6 +6,7 @@ categories: Theme
 tags: jekyll arsxy advanced-features customization
 author: Awcodify
 image: theme-demo-2.webp
+featured: true
 ---
 
 Arsxy theme offers many advanced features beyond the basics. This guide explores the powerful capabilities that make Arsxy an excellent choice for technical blogs, documentation sites, and developer portfolios.
diff --git a/_posts/2025-05-13-configurable-hero-section.md b/_posts/2025-05-13-configurable-hero-section.md
index e83cf20..ff59ee8 100644
--- a/_posts/2025-05-13-configurable-hero-section.md
+++ b/_posts/2025-05-13-configurable-hero-section.md
@@ -1,8 +1,7 @@
 ---
 layout: post
 title: "Customizing Your Homepage Hero Section in Arsxy Theme"
-categories: [features, customization]
-featured: true
+categories: [Features, customization]
 image: theme-demo-2.webp
 description: "Learn how to customize or completely disable the homepage hero section in Arsxy Theme using simple configuration options."
 author: awcodify
diff --git a/_posts/2025-05-14-new-features-in-arsxy-theme.md b/_posts/2025-05-14-new-features-in-arsxy-theme.md
index beb6c82..249d9f5 100644
--- a/_posts/2025-05-14-new-features-in-arsxy-theme.md
+++ b/_posts/2025-05-14-new-features-in-arsxy-theme.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: "New Features in Arsxy Theme: Related Posts, Social Sharing, and Search"
-categories: [features, updates]
+categories: [Features, updates]
 tags: [related-posts, search, social-sharing, jekyll, theme]
 description: "Explore the newest features added to Arsxy Theme: intelligent related posts suggestions, social sharing buttons for enhanced content distribution, and a powerful search functionality."
 image: "new-features-update.svg"
diff --git a/_posts/2025-05-30-introducing-social-media-inspired-home-layout.md b/_posts/2025-05-30-introducing-social-media-inspired-home-layout.md
new file mode 100644
index 0000000..cf49379
--- /dev/null
+++ b/_posts/2025-05-30-introducing-social-media-inspired-home-layout.md
@@ -0,0 +1,282 @@
+---
+layout: post
+title: "🎉 Introducing the Social Media-Inspired Home Layout: A Modern Take on Blog Design"
+author: "Arsxy Theme Team"
+author_avatar: "/assets/images/author.jpg"
+date: 2025-05-30
+categories: [Features, Layout, Design]
+tags: [home-v2, social-media, instagram, modern-design, user-experience, responsive]
+image: "social-media-inspired-home-layout.webp"
+description: "Discover the revolutionary new home-v2 layout that transforms your Jekyll blog into a modern, social media-inspired experience with Instagram-style stories, interactive post cards, and engaging sidebar widgets."
+featured: true
+---
+
+We're thrilled to announce the most significant update to Arsxy Theme yet: the **Social Media-Inspired Home Layout** (`home-v2`)! This innovative layout transforms your traditional blog homepage into a modern, engaging experience that draws inspiration from popular social media platforms while maintaining the professionalism your readers expect.
+
+## 🌟 What Makes This Layout Special?
+
+The new `home-v2` layout isn't just another homepage design—it's a complete reimagining of how readers discover and interact with your content. We've carefully studied modern user behavior and social media interaction patterns to create a layout that feels familiar yet fresh.
+
+### Key Highlights at a Glance
+
+- **Instagram-Style Stories Navigation** with gradient rings and smooth interactions
+- **Social Media Post Cards** featuring author avatars, reading time, and action buttons
+- **Interactive Controls** for filtering and view switching (feed vs. grid)
+- **Engaging Sidebar** with profile cards, trending topics, and site statistics
+- **Smart Action Buttons** for seamless reading, commenting, and sharing
+- **Comprehensive Responsive Design** optimized for all device sizes
+- **Dark Mode Support** with beautiful color schemes
+- **Performance Optimized** with lazy loading and smooth animations
+
+## 🎯 Instagram-Style Stories Navigation
+
+One of the most exciting features is our **Stories Navigation** that brings the familiar Instagram stories experience to your blog. Categories are displayed as circular story items with beautiful gradient rings, making content discovery intuitive and visually appealing.
+
+### How It Works
+
+- **Visual Categories**: Each category gets its own story circle with custom imagery or emoji fallbacks
+- **Gradient Rings**: Active and featured categories display with eye-catching gradient borders
+- **Smooth Filtering**: Click any story to instantly filter posts by that category
+- **Touch-Friendly**: Optimized for mobile interactions with proper touch targets
+
+### Easy Setup
+
+Simply organize your posts with categories, and the layout automatically generates beautiful story navigation:
+
+```yaml
+---
+title: "Your Amazing Post"
+categories: [Tutorial, Features, Demo]
+---
+```
+
+## 📱 Social Media-Style Post Cards
+
+Say goodbye to traditional blog lists! Our new **post cards** present your content in an engaging, social media-inspired format that encourages exploration and interaction.
+
+### Card Features
+
+- **Author Avatars**: Personal touch with author profile images
+- **Reading Time Estimates**: Help readers plan their time
+- **Publication Dates**: Clear temporal context
+- **Featured Badges**: Highlight your most important content
+- **Action Buttons**: Direct access to read, comment, and share
+
+### Smart Actions
+
+Each post card includes three intelligent action buttons:
+
+1. **Read Article**: Direct navigation to the full post
+2. **Comments**: Jump straight to the Giscus comment section
+3. **Share Dropdown**: Native sharing with fallback to copy-to-clipboard
+
+## 🔧 Interactive Controls & Views
+
+The layout provides multiple ways for readers to customize their browsing experience:
+
+### Filter Tabs
+- **All Posts**: Browse your complete content library
+- **Featured**: Quickly access highlighted articles
+
+### View Toggle
+- **Feed View**: Traditional vertical scrolling (default)
+- **Grid View**: Pinterest-style grid layout for visual browsing
+
+### Load More Functionality
+- **Progressive Loading**: Smooth pagination without page refreshes
+- **Performance Optimized**: Only loads content as needed
+
+## 📊 Engaging Sidebar Experience
+
+The sidebar isn't just navigation—it's a content discovery engine that keeps readers engaged:
+
+### Profile Card
+- **Author Information**: Personal bio and contact details
+- **Site Statistics**: Dynamic metrics that showcase your blog's activity
+- **Social Links**: Direct connections to your social profiles
+
+### Content Discovery Widgets
+
+1. **Trending Categories**: Highlight your most popular content areas
+2. **Popular Tags**: Dynamic tag cloud with smart styling
+3. **Site Statistics**: Real-time metrics that build credibility
+4. **Quick Navigation**: Fast access to important pages
+
+### Smart Statistics
+
+The statistics widget automatically calculates and displays:
+- Total number of posts
+- Total categories and tags
+- Recent activity indicators
+- Engagement metrics
+
+## ⚡ Technical Excellence
+
+### Performance First
+- **Lazy Loading**: Images load only when needed
+- **Optimized JavaScript**: Minimal, efficient interactions
+- **CSS Custom Properties**: Easy theming without SASS recompilation
+- **Progressive Enhancement**: Works with JavaScript disabled
+
+### Responsive Design
+- **Desktop (1024px+)**: Full experience with sidebar
+- **Tablet (768px-1024px)**: Optimized single-column layout
+- **Mobile (<768px)**: Touch-optimized compact design
+
+### Accessibility Features
+- **ARIA Labels**: Proper accessibility markup
+- **Keyboard Navigation**: Full keyboard support
+- **High Contrast**: Readable in both light and dark modes
+- **Semantic HTML**: Screen reader friendly structure
+
+## 🎨 Dark Mode & Theming
+
+The layout includes comprehensive dark mode support with carefully crafted color schemes:
+
+### Automatic Dark Mode
+- **System Preference Detection**: Respects user's OS settings
+- **Manual Toggle**: Option for user control
+- **Consistent Experience**: All components support both themes
+
+### Easy Customization
+The entire layout uses CSS custom properties for effortless theming:
+
+```css
+:root {
+  --home-v2-bg: #fafafa;
+  --home-v2-card-bg: #ffffff;
+  --home-v2-primary: #3b82f6;
+  --home-v2-accent: #8b5cf6;
+  /* 20+ customizable properties */
+}
+```
+
+## 🚀 Getting Started
+
+Implementing the new layout is incredibly simple:
+
+### 1. Create Your Homepage
+
+```yaml
+---
+layout: home-v2
+title: "Welcome to My Blog"
+description: "A modern homepage experience"
+---
+```
+
+### 2. Configure Your Site
+
+Add author information to `_config.yml`:
+
+```yaml
+author: "Your Name"
+author_avatar: "/assets/images/author.jpg"
+description: "Your engaging site description"
+```
+
+### 3. Optimize Your Posts
+
+For the best experience, use this post frontmatter:
+
+```yaml
+---
+title: "Your Post Title"
+author: "Author Name"
+author_avatar: "/assets/images/author-avatar.jpg"
+featured: true  # For featured badge
+categories: [Category1, Category2]
+tags: [tag1, tag2, tag3]
+image: "post-featured-image.jpg"
+reading_time: 5  # Optional, auto-calculated if not provided
+---
+```
+
+### 4. Add Category Images (Optional)
+
+Place category-specific images in `/assets/images/categories/` for enhanced visual appeal. The layout gracefully falls back to emoji representations if images aren't available.
+
+## 🔄 Seamless Layout Switching
+
+One of the best features? You can easily switch between layouts without any data loss:
+
+### Traditional Blog Layout
+```yaml
+---
+layout: home
+---
+```
+
+### Modern Social Media Layout
+```yaml
+---
+layout: home-v2
+---
+```
+
+Both layouts work with the same content and configuration—choose what fits your brand!
+
+## 🌐 Browser Support & Compatibility
+
+The layout supports all modern browsers with graceful degradation:
+- **Chrome 80+**
+- **Firefox 80+**
+- **Safari 13+**
+- **Edge 80+**
+
+Advanced features like native sharing provide enhanced experiences where supported, with smart fallbacks ensuring functionality everywhere.
+
+## 💡 Best Practices for Maximum Impact
+
+### Content Strategy
+1. **Use Featured Posts**: Highlight your best content for maximum visibility
+2. **Organize with Categories**: Create logical content groupings for stories navigation
+3. **Write Engaging Excerpts**: First paragraphs become card previews
+4. **Tag Strategically**: Popular tags widget showcases your content themes
+
+### Visual Optimization
+1. **Optimize Images**: Use WebP format and appropriate sizes
+2. **Author Avatars**: Personal photos create connection and trust
+3. **Category Images**: Custom imagery enhances stories navigation
+4. **Consistent Branding**: Maintain visual consistency across all elements
+
+### Performance Tips
+1. **Image Optimization**: Compress images for faster loading
+2. **Content Planning**: Balance featured vs. regular posts
+3. **Mobile Testing**: Ensure great experience on all devices
+
+## 🔮 What's Next?
+
+This layout represents just the beginning of our social media-inspired features. Coming soon:
+
+- **Enhanced Analytics Integration**: Deeper insights into content performance
+- **Advanced Filtering Options**: More granular content discovery
+- **Social Media Integration**: Direct posting and syndication features
+- **User Personalization**: Customizable layouts and preferences
+
+## 🎉 Ready to Transform Your Blog?
+
+The Social Media-Inspired Home Layout is available now and ready to revolutionize your readers' experience. Whether you're running a tech blog, personal site, or documentation hub, this layout brings modern engagement patterns to your Jekyll site.
+
+### Quick Start Checklist
+
+- [ ] Update to the latest Arsxy Theme version
+- [ ] Create a new page with `layout: home-v2`
+- [ ] Configure author information in `_config.yml`
+- [ ] Optimize your post frontmatter
+- [ ] Add category images (optional)
+- [ ] Test on mobile devices
+- [ ] Share your new layout with the community!
+
+## 📚 Learn More
+
+- **[Complete Documentation](/docs/home-v2-layout/)** - Comprehensive setup guide
+- **[Live Demo](/v2/)** - See the layout in action
+- **[Customization Guide](/docs/customization/)** - Advanced theming options
+- **[Performance Tips](/docs/performance/)** - Optimization best practices
+
+---
+
+We can't wait to see how you use this new layout to engage your readers! Share your implementations with us on social media using **#ArsxyTheme** and **#SocialMediaLayout**.
+
+*Have questions or suggestions? Join the conversation in our [GitHub Discussions](https://github.com/awcodify/arsxy-theme/discussions) or reach out to our team.*
diff --git a/_sass/components/_home-v2.scss b/_sass/components/_home-v2.scss
new file mode 100644
index 0000000..3b8af7c
--- /dev/null
+++ b/_sass/components/_home-v2.scss
@@ -0,0 +1,1491 @@
+// Social Media Inspired Homepage Layout (home-v2)
+// Modern, clean design for static Jekyll blogs with social media aesthetics
+
+// Define CSS custom properties for theme support
+:root {
+  --home-v2-bg: #{d$background-color};
+  --home-v2-card-bg: #{darken($background-color, 1%)};
+  --home-v2-text: #{$text-color};
+  --home-v2-text-muted: #{$dark-gray};
+  --home-v2-border: #{$border-color};
+  --home-v2-hover: #{$light-gray};
+  --home-v2-primary: #{$primary-color};
+  --home-v2-accent: #{$accent-color};
+  --home-v2-success: #{$success-color};
+  --home-v2-warning: #{$warning-color};
+  --home-v2-shadow: rgba(0, 0, 0, 0.1);
+  --home-v2-shadow-hover: rgba(0, 0, 0, 0.15);
+}
+
+// Dark theme support - use class-based dark mode instead of media query
+html.dark-mode {
+  --home-v2-bg: #{$dark-background};
+  --home-v2-card-bg: #{$dark-surface};
+  --home-v2-text: #{$dark-text-color};
+  --home-v2-text-muted: #{$dark-gray-light};
+  --home-v2-border: #{$dark-border-color};
+  --home-v2-hover: #{$dark-border-color};
+  --home-v2-shadow: rgba(0, 0, 0, 0.3);
+  --home-v2-shadow-hover: rgba(0, 0, 0, 0.4);
+}
+
+.layout-home-v2 {
+  background: var(--home-v2-bg);
+  
+  .page-content {
+    background: var(--home-v2-bg);
+  }
+  
+  .site-header {
+    background-color: var(--home-v2-card-bg);
+    border-bottom: 1px solid var(--home-v2-border);
+    
+    .wrapper {
+      background: inherit;
+    }
+  }
+}
+
+.home-v2 {
+  background: var(--home-v2-bg);
+  min-height: 100vh;
+  color: var(--home-v2-text);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  line-height: 1.6;
+  
+  // Stories Section - Instagram-inspired category navigation
+  .stories-section {
+    background: transparent;
+    padding: 1rem 0;
+    margin-bottom: 2rem;
+    
+    .stories-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 1rem;
+      display: flex;
+      gap: 1rem;
+      overflow-x: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      
+      .story-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        min-width: 80px;
+        cursor: pointer;
+        transition: transform 0.2s ease;
+        
+        &:hover {
+          transform: translateY(-2px);
+        }
+        
+        &.active .avatar-ring {
+          background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
+          padding: 3px;
+        }
+        
+        .story-avatar {
+          position: relative;
+          width: 66px;
+          height: 66px;
+          
+          .avatar-ring {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
+            padding: 2px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+            img, .story-placeholder {
+              width: 58px;
+              height: 58px;
+              border-radius: 50%;
+              object-fit: cover;
+              background: var(--home-v2-card-bg);
+              border: 2px solid var(--home-v2-card-bg);
+            }
+            
+            .story-placeholder {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: 1.5rem;
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              color: white;
+            }
+          }
+        }
+        
+        .story-label {
+          font-size: 0.75rem;
+          color: var(--home-v2-text-muted);
+          text-align: center;
+          max-width: 80px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  
+  // Main Feed Container
+  .feed-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    gap: 2rem;
+    
+    @media (max-width: 1024px) {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+      
+      .social-sidebar {
+        display: none;
+      }
+    }
+  }
+  
+  // Feed Controls
+  .feed-controls {
+    background: var(--home-v2-card-bg);
+    border: 1px solid var(--home-v2-border);
+    border-radius: 16px;
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 3px var(--home-v2-shadow);
+    
+    .filter-tabs {
+      display: flex;
+      gap: 0.5rem;
+      
+      .filter-tab {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        border: none;
+        background: transparent;
+        border-radius: 20px;
+        color: var(--home-v2-text-muted);
+        font-size: 0.9rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover {
+          background: var(--home-v2-hover);
+          color: var(--home-v2-text);
+        }
+        
+        &.active {
+          background: var(--home-v2-primary);
+          color: white;
+        }
+      }
+    }
+    
+    .view-toggles {
+      display: flex;
+      gap: 0.25rem;
+      
+      .view-toggle {
+        padding: 0.5rem;
+        border: none;
+        background: transparent;
+        border-radius: 6px;
+        color: var(--home-v2-text-muted);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover {
+          background: var(--home-v2-hover);
+          color: var(--home-v2-text);
+        }
+        
+        &.active {
+          background: var(--home-v2-primary);
+          color: white;
+        }
+      }
+    }
+  }
+  
+  // Posts Feed
+  .posts-feed {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    
+    // Grid view styles
+    &.grid-view {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      gap: 1.5rem;
+      
+      .post-card {
+        margin-bottom: 0;
+        
+        .post-content {
+          .post-image {
+            margin: 1rem 0 0.75rem 0;
+            
+            img {
+              max-height: 200px;
+            }
+          }
+          
+          .post-excerpt {
+            font-size: 0.9rem;
+            line-height: 1.5;
+          }
+          
+          .post-tags {
+            margin-bottom: 0.75rem;
+            
+            .tag {
+              font-size: 0.8rem;
+              margin-right: 0.5rem;
+            }
+          }
+        }
+        
+        .post-actions {
+          padding: 0.75rem 1rem;
+          
+          .action-buttons {
+            display: flex;
+            flex-direction: row;
+            gap: 0.4rem;
+            justify-content: space-between;
+            
+            .action-btn {
+              font-size: 0.75rem;
+              padding: 0.4rem 0.6rem;
+              min-width: auto;
+              flex: 1;
+              justify-content: center;
+              
+              span {
+                display: none;
+              }
+              
+              svg {
+                width: 14px;
+                height: 14px;
+                margin: 0;
+              }
+            }
+            
+            .share-dropdown {
+              flex: 1;
+              
+              .action-btn {
+                width: 100%;
+              }
+              
+              .share-menu {
+                left: 50%;
+                right: auto;
+                top: auto;
+                bottom: calc(100% + 5px);
+                transform: translateX(-50%) translateY(10px);
+                width: 240px;
+                min-width: 100px;
+                flex-wrap: wrap;
+                
+                /* Grid-specific bridge */
+                &::before {
+                  left: 0;
+                  right: 0;
+                  width: 100%;
+                }
+                
+                &.visible {
+                  transform: translateX(-50%) translateY(0);
+                }
+                
+                &::after {
+                  left: 50%;
+                  right: auto;
+                  margin-left: -6px;
+                }
+                
+                .share-option {
+                  width: 48px;
+                  padding: 0.4rem;
+                  font-size: 0.65rem;
+                }
+              }
+            }
+          }
+          
+          .post-meta-info {
+            font-size: 0.75rem;
+            gap: 0.5rem;
+          }
+        }
+      }
+    }
+    
+    .post-card {
+      background: var(--home-v2-card-bg);
+      border: 1px solid var(--home-v2-border);
+      border-radius: 16px;
+      overflow: visible;
+      transition: all 0.3s ease;
+      box-shadow: 0 1px 3px var(--home-v2-shadow);
+      
+      &:hover {
+        box-shadow: 0 8px 25px var(--home-v2-shadow-hover);
+        transform: translateY(-2px);
+      }
+      
+      // Post Header
+      .post-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 1rem 1rem 0.75rem;
+        
+        .author-info {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          
+          .author-avatar {
+            width: 40px;
+            height: 40px;
+            position: relative;
+            
+            img, .avatar-placeholder {
+              width: 100%;
+              height: 100%;
+              border-radius: 50%;
+              object-fit: cover;
+            }
+            
+            .avatar-placeholder {
+              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: white;
+              font-weight: 600;
+              font-size: 1rem;
+            }
+          }
+          
+          .author-details {
+            .author-name {
+              font-size: 0.9rem;
+              font-weight: 600;
+              color: var(--home-v2-text);
+              margin: 0 0 0.2rem 0;
+            }
+            
+            .post-meta {
+              font-size: 0.8rem;
+              color: var(--home-v2-text-muted);
+              display: flex;
+              align-items: center;
+              gap: 0.5rem;
+              
+              .category {
+                color: var(--home-v2-primary);
+                font-weight: 500;
+              }
+            }
+          }
+        }
+        
+        .featured-badge {
+          color: #ffd700;
+          width: 2rem;
+          height: 2rem;
+          border-radius: 50%;
+          background: rgba(255, 215, 0, 0.1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      
+      // Post Content
+      .post-content {
+        padding: 0.75rem 1rem;
+        
+        .post-title {
+          margin: 0 0 0.75rem 0;
+          
+          a {
+            color: var(--home-v2-text);
+            text-decoration: none;
+            font-size: 1.25rem;
+            font-weight: 700;
+            line-height: 1.3;
+            transition: color 0.3s ease;
+            
+            &:hover {
+              color: var(--home-v2-primary);
+            }
+          }
+        }
+        
+        .post-excerpt {
+          color: var(--home-v2-text-muted);
+          font-size: 0.95rem;
+          line-height: 1.6;
+          margin: 0 0 1rem 0;
+        }
+        
+        .post-tags {
+          margin-bottom: 1rem;
+          
+          .tag {
+            color: var(--home-v2-primary);
+            text-decoration: none;
+            font-size: 0.85rem;
+            margin-right: 0.75rem;
+            font-weight: 500;
+            transition: opacity 0.3s ease;
+            
+            &:hover {
+              text-decoration: underline;
+              opacity: 0.8;
+            }
+          }
+        }
+        
+        .post-image {
+          margin: 1rem 0 0.75rem 0;
+          border-radius: 12px;
+          overflow: hidden;
+          
+          img {
+            width: 100%;
+            height: auto;
+            max-height: 400px;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+            
+            &:hover {
+              transform: scale(1.02);
+            }
+          }
+        }
+      }
+      
+      // Post Actions
+      .post-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 1rem 1rem;
+        border-top: 1px solid var(--home-v2-border);
+        margin-top: 1rem;
+        padding-top: 1rem;
+        
+        .action-buttons {
+          display: flex;
+          gap: 1rem;
+          
+          .action-btn {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            border: 1px solid var(--home-v2-border);
+            background: var(--home-v2-card-bg);
+            color: var(--home-v2-text);
+            text-decoration: none;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            
+            &:hover {
+              background: var(--home-v2-primary);
+              color: white;
+              border-color: var(--home-v2-primary);
+              transform: translateY(-1px);
+            }
+            
+            svg {
+              width: 16px;
+              height: 16px;
+            }
+          }
+          
+          .share-dropdown {
+            position: relative;
+            
+            /* Extend hover area slightly to catch cursor movement */
+            &::after {
+              content: '';
+              position: absolute;
+              top: -5px;
+              left: -5px;
+              right: -5px;
+              bottom: -5px;
+              z-index: -1;
+            }
+            
+            .share-menu {
+              position: absolute;
+              bottom: calc(100% + 5px);
+              left: 50%;
+              transform: translateX(-50%) translateY(10px);
+              background: var(--home-v2-card-bg);
+              border: 1px solid var(--home-v2-border);
+              border-radius: 12px;
+              padding: 0.5rem;
+              box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+              z-index: 9999; /* Ensure high z-index to prevent blocking */
+              opacity: 0;
+              visibility: hidden;
+              pointer-events: none; /* Prevent click-through when hidden */
+              transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.3s;
+              
+              /* Create invisible bridge to prevent hover loss */
+              &::before {
+                content: '';
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                height: 15px;
+                background: transparent;
+                z-index: -1;
+              }
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: center;
+              gap: 0.5rem;
+              flex-wrap: wrap;
+              width: 280px;
+              max-width: calc(100vw - 40px);
+              /* Safari compatibility fixes */
+              -webkit-backface-visibility: hidden;
+              backface-visibility: hidden;
+              -webkit-transform-style: preserve-3d;
+              transform-style: preserve-3d;
+              
+              /* Mobile responsiveness enhancement */
+              @media (max-width: 767px) {
+                width: 240px;
+                padding: 0.4rem;
+                
+                .share-option {
+                  width: 55px;
+                  padding: 0.5rem;
+                  font-size: 0.65rem;
+                }
+              }
+              
+              @media (max-width: 480px) {
+                width: 220px;
+                
+                .share-option {
+                  width: 45px;
+                  padding: 0.4rem;
+                  font-size: 0.6rem;
+                }
+              }
+              
+              .grid-view & {
+                width: 220px;
+                left: 50%;
+                right: auto;
+                bottom: calc(100% + 5px);
+                transform: translateX(-50%) translateY(10px);
+                flex-wrap: wrap;
+                
+                /* Grid view specific bridge */
+                &::before {
+                  left: 0;
+                  right: 0;
+                  width: 100%;
+                }
+                
+                &.visible, &:hover {
+                  transform: translateX(-50%) translateY(0);
+                }
+                
+                &::after {
+                  left: 50%;
+                  right: auto;
+                  margin-left: -6px;
+                }
+              }
+              
+              &.visible {
+                opacity: 1;
+                visibility: visible;
+                pointer-events: auto;
+                transform: translateX(-50%) translateY(0);
+                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
+                
+                .grid-view & {
+                  transform: translateX(-50%) translateY(0);
+                }
+              }
+              
+              &::after {
+                content: '';
+                position: absolute;
+                bottom: -6px;
+                left: 50%;
+                margin-left: -6px;
+                width: 12px;
+                height: 12px;
+                background: var(--home-v2-card-bg);
+                transform: rotate(45deg);
+                border-right: 1px solid var(--home-v2-border);
+                border-bottom: 1px solid var(--home-v2-border);
+              }
+              
+              .share-option {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+                padding: 0.75rem;
+                color: var(--home-v2-text);
+                text-decoration: none;
+                border-radius: 8px;
+                font-size: 0.8rem;
+                font-weight: 500;
+                border: none;
+                background: none;
+                cursor: pointer;
+                text-align: center;
+                transition: all 0.2s ease;
+                width: 70px;
+                outline: none; /* Remove default outline */
+                
+                &:hover, &:focus {
+                  background: var(--home-v2-hover);
+                  transform: translateY(-2px);
+                  outline: none;
+                  
+                  svg {
+                    color: var(--home-v2-primary);
+                    transform: scale(1.1);
+                  }
+                }
+                
+                /* Add custom focus style for keyboard navigation */
+                &:focus-visible {
+                  box-shadow: 0 0 0 2px var(--home-v2-primary);
+                  outline: none;
+                }
+                
+                svg {
+                  width: 20px;
+                  height: 20px;
+                  transition: all 0.2s ease;
+                }
+              }
+            }
+            
+            &:hover .share-menu, .share-menu:hover, .share-menu:focus-within {
+              opacity: 1;
+              visibility: visible;
+              pointer-events: auto;
+              transform: translateX(-50%) translateY(0);
+              transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
+              
+              /* Make bridge visible when menu is shown */
+              &::before {
+                pointer-events: auto;
+              }
+              
+              .grid-view & {
+                transform: translateX(-50%) translateY(0);
+              }
+            }
+            
+            /* Add focus state for better accessibility */
+            &:focus-within .share-menu {
+              opacity: 1;
+              visibility: visible;
+              pointer-events: auto;
+              transform: translateX(-50%) translateY(0);
+              transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
+              
+              /* Make bridge visible when menu is shown */
+              &::before {
+                pointer-events: auto;
+              }
+              
+              .grid-view & {
+                transform: translateX(-50%) translateY(0);
+              }
+            }
+          }
+        }
+        
+        .post-meta-info {
+          display: flex;
+          gap: 1rem;
+          font-size: 0.8rem;
+          color: var(--home-v2-text-muted);
+        }
+      }
+    }
+  }
+  
+  // Notification Toast
+  .notification-toast {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--home-v2-success);
+    color: white;
+    padding: 0.75rem 1.25rem;
+    border-radius: 30px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
+    
+    &.visible {
+      opacity: 1;
+      visibility: visible;
+      transform: translate(-50%, -10px);
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+    
+    svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+  }
+  
+  // Pagination Section
+  .pagination-container {
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+    
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      background: var(--home-v2-card-bg);
+      border: 1px solid var(--home-v2-border);
+      border-radius: 12px;
+      padding: 0.5rem;
+      box-shadow: 0 1px 3px var(--home-v2-shadow);
+      
+      .pagination-btn {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.75rem 1rem;
+        border: none;
+        background: transparent;
+        color: var(--home-v2-text);
+        text-decoration: none;
+        border-radius: 8px;
+        font-weight: 500;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover:not(.disabled) {
+          background: var(--home-v2-primary);
+          color: white;
+          transform: translateY(-1px);
+        }
+        
+        &.disabled {
+          color: var(--home-v2-text-muted);
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+      
+      .pagination-pages {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        margin: 0 0.5rem;
+        
+        .pagination-page {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 40px;
+          height: 40px;
+          padding: 0.5rem;
+          border: none;
+          background: transparent;
+          color: var(--home-v2-text);
+          text-decoration: none;
+          border-radius: 6px;
+          font-weight: 500;
+          font-size: 0.9rem;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          
+          &:hover {
+            background: var(--home-v2-hover);
+          }
+          
+          &.current {
+            background: var(--home-v2-primary);
+            color: white;
+            cursor: default;
+          }
+        }
+      }
+    }
+    
+    .pagination-info {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-size: 0.85rem;
+      color: var(--home-v2-text-muted);
+      
+      .pagination-separator {
+        opacity: 0.5;
+      }
+    }
+    
+    @media (max-width: 768px) {
+      .pagination {
+        flex-direction: row;
+        flex-wrap: nowrap;
+        padding: 0.5rem;
+        gap: 0.25rem;
+        justify-content: center;
+        align-items: center;
+        
+        .pagination-btn {
+          padding: 0.4rem 0.6rem;
+          font-size: 0.75rem;
+          min-width: auto;
+          flex-shrink: 0;
+          
+          span {
+            display: none;
+          }
+          
+          svg {
+            margin: 0;
+            width: 14px;
+            height: 14px;
+          }
+        }
+        
+        .pagination-pages {
+          margin: 0 0.25rem;
+          gap: 0.15rem;
+          flex-wrap: nowrap;
+          
+          .pagination-page {
+            min-width: 28px;
+            height: 28px;
+            font-size: 0.75rem;
+            padding: 0.2rem;
+          }
+        }
+      }
+      
+      .pagination-info {
+        font-size: 0.75rem;
+        margin-top: 0.25rem;
+      }
+    }
+    
+    @media (max-width: 480px) {
+      .pagination {
+        padding: 0.4rem;
+        gap: 0.2rem;
+        
+        .pagination-btn {
+          padding: 0.3rem 0.5rem;
+          font-size: 0.7rem;
+          min-width: auto;
+          
+          svg {
+            width: 12px;
+            height: 12px;
+          }
+        }
+        
+        .pagination-pages {
+          gap: 0.1rem;
+          margin: 0 0.2rem;
+          
+          .pagination-page {
+            min-width: 24px;
+            height: 24px;
+            font-size: 0.7rem;
+            padding: 0.15rem;
+          }
+        }
+      }
+      
+      .pagination-info {
+        font-size: 0.7rem;
+      }
+    }
+  }
+  
+  // Sidebar
+  .social-sidebar {
+    > div {
+      background: var(--home-v2-card-bg);
+      border: 1px solid var(--home-v2-border);
+      border-radius: 16px;
+      padding: 1.5rem;
+      margin-bottom: 1.5rem;
+      box-shadow: 0 1px 3px var(--home-v2-shadow);
+    }
+    
+    .widget-title {
+      font-size: 1rem;
+      font-weight: 700;
+      color: var(--home-v2-text);
+      margin: 0 0 1rem 0;
+    }
+    
+    // Profile Card
+    .profile-card {
+      text-align: center;
+      
+      .profile-avatar {
+        width: 80px;
+        height: 80px;
+        margin: 0 auto 1rem;
+        position: relative;
+        
+        img, .avatar-placeholder {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          object-fit: cover;
+        }
+        
+        .avatar-placeholder {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          font-weight: 600;
+          font-size: 2rem;
+        }
+      }
+      
+      .profile-info {
+        margin-bottom: 1rem;
+        
+        .profile-name {
+          font-size: 1.1rem;
+          font-weight: 700;
+          color: var(--home-v2-text);
+          margin: 0 0 0.5rem 0;
+        }
+        
+        .profile-bio {
+          color: var(--home-v2-text-muted);
+          font-size: 0.9rem;
+          line-height: 1.4;
+          margin: 0 0 0.75rem 0;
+        }
+        
+        .profile-link {
+          display: inline-block;
+          color: var(--primary-color);
+          text-decoration: none;
+          font-size: 0.85rem;
+          font-weight: 600;
+          transition: color 0.3s ease;
+          
+          &:hover {
+            color: var(--link-hover-color);
+            text-decoration: underline;
+          }
+        }
+      }
+      
+      .profile-stats {
+        display: flex;
+        justify-content: space-around;
+        padding-top: 1rem;
+        border-top: 1px solid var(--home-v2-border);
+        
+        .stat {
+          text-align: center;
+          
+          .stat-number {
+            display: block;
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--home-v2-text);
+          }
+          
+          .stat-label {
+            font-size: 0.8rem;
+            color: var(--home-v2-text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+    
+    // Trending Widget
+    .trending-widget {
+      .trending-list {
+        .trending-item {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+          padding: 0.75rem 0;
+          border-bottom: 1px solid var(--home-v2-border);
+          text-decoration: none;
+          transition: all 0.3s ease;
+          
+          &:last-child {
+            border-bottom: none;
+          }
+          
+          &:hover {
+            background: var(--home-v2-hover);
+            margin: 0 -1.5rem;
+            padding: 0.75rem 1.5rem;
+            border-radius: 8px;
+          }
+          
+          .trending-number {
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: var(--home-v2-primary);
+            min-width: 30px;
+          }
+          
+          .trending-name {
+            color: var(--home-v2-text);
+            font-weight: 600;
+            font-size: 0.9rem;
+          }
+          
+          .trending-count {
+            font-size: 0.8rem;
+            color: var(--home-v2-text-muted);
+          }
+        }
+      }
+    }
+    
+    // Tags Widget  
+    .tags-widget {
+      .tags-cloud {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        
+        .tag-item {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.4rem 0.8rem;
+          background: var(--home-v2-hover);
+          border: 1px solid var(--home-v2-border);
+          border-radius: 20px;
+          text-decoration: none;
+          color: var(--home-v2-text);
+          font-size: 0.8rem;
+          font-weight: 500;
+          transition: all 0.3s ease;
+          
+          &:hover {
+            background: var(--home-v2-primary);
+            border-color: var(--home-v2-primary);
+            color: white;
+            transform: translateY(-1px);
+            
+            .tag-hash, .tag-count {
+              color: white;
+            }
+          }
+          
+          .tag-hash {
+            color: var(--home-v2-primary);
+            font-weight: 600;
+            font-size: 0.9rem;
+          }
+          
+          .tag-count {
+            background: var(--home-v2-border);
+            color: var(--home-v2-text-muted);
+            padding: 0.1rem 0.4rem;
+            border-radius: 10px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            margin-left: 0.25rem;
+          }
+        }
+      }
+    }
+    
+    // Stats Widget
+    .stats-widget {
+      .stats-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+        
+        .stat-item {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.75rem;
+          background: var(--home-v2-hover);
+          border-radius: 12px;
+          transition: all 0.3s ease;
+          
+          &:hover {
+            background: var(--home-v2-primary);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px var(--home-v2-shadow);
+            
+            .stat-icon svg {
+              color: white;
+            }
+            
+            .stat-details .stat-number,
+            .stat-details .stat-label {
+              color: white;
+            }
+          }
+          
+          .stat-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            background: var(--home-v2-primary);
+            border-radius: 10px;
+            flex-shrink: 0;
+            
+            svg {
+              color: white;
+              transition: color 0.3s ease;
+            }
+          }
+          
+          .stat-details {
+            flex: 1;
+            min-width: 0;
+            
+            .stat-number {
+              display: block;
+              font-size: 1.1rem;
+              font-weight: 700;
+              color: var(--home-v2-text);
+              line-height: 1.2;
+              transition: color 0.3s ease;
+            }
+            
+            .stat-label {
+              font-size: 0.75rem;
+              color: var(--home-v2-text-muted);
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+              font-weight: 600;
+              line-height: 1.3;
+              transition: color 0.3s ease;
+            }
+          }
+        }
+        
+        @media (max-width: 480px) {
+          grid-template-columns: 1fr;
+          gap: 0.75rem;
+          
+          .stat-item {
+            padding: 0.75rem;
+            gap: 0.5rem;
+            
+            .stat-icon {
+              width: 36px;
+              height: 36px;
+              
+              svg {
+                width: 18px;
+                height: 18px;
+              }
+            }
+            
+            .stat-details {
+              .stat-number {
+                font-size: 1rem;
+              }
+              
+              .stat-label {
+                font-size: 0.7rem;
+              }
+            }
+          }
+        }
+      }
+    }
+    
+    // Categories Widget
+    .categories-widget {
+      .categories-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+        
+        .category-chip {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.75rem;
+          background: var(--home-v2-hover);
+          border-radius: 8px;
+          text-decoration: none;
+          transition: all 0.3s ease;
+          
+          &:hover {
+            background: var(--home-v2-primary);
+            
+            .category-name, .category-count {
+              color: white;
+            }
+          }
+          
+          .category-name {
+            color: var(--home-v2-text);
+            font-weight: 600;
+            font-size: 0.9rem;
+          }
+          
+          .category-count {
+            font-size: 0.8rem;
+            color: var(--home-v2-text-muted);
+          }
+        }
+      }
+    }
+    
+    // Quick Links Widget
+    .quick-links-widget {
+      .quick-links {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        
+        li {
+          a {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem 0;
+            text-decoration: none;
+            color: var(--home-v2-text);
+            font-weight: 500;
+            font-size: 0.9rem;
+            border-bottom: 1px solid var(--home-v2-border);
+            transition: all 0.3s ease;
+            
+            &:hover {
+              color: var(--home-v2-primary);
+              background: var(--home-v2-hover);
+              margin: 0 -1.5rem;
+              padding: 0.75rem 1.5rem;
+              border-radius: 8px;
+            }
+          }
+          
+          &:last-child a {
+            border-bottom: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Responsive Design
+@media (max-width: 768px) {
+  .home-v2 {
+    .reading-time {
+      visibility: hidden;
+    }
+    .stories-section {
+      .stories-container {
+        padding: 0 0.5rem;
+        gap: 0.75rem;
+        
+        .story-item {
+          min-width: 70px;
+          
+          .story-avatar {
+            width: 56px;
+            height: 56px;
+            
+            .avatar-ring {
+              img, .story-placeholder {
+                width: 50px;
+                height: 50px;
+              }
+            }
+          }
+          
+          .story-label {
+            font-size: 0.7rem;
+            max-width: 70px;
+          }
+        }
+      }
+    }
+    
+    .feed-container {
+      padding: 0 0.5rem;
+    }
+    
+    .feed-controls {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: stretch;
+      
+      .filter-tabs {
+        justify-content: center;
+      }
+      
+      .view-toggles {
+        display: none;
+      }
+    }
+    
+    .posts-feed {
+      &.grid-view {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+        
+        .post-card {
+          .post-actions {
+            .action-buttons {
+              flex-direction: row;
+              justify-content: center;
+              flex-wrap: nowrap;
+              gap: 0.25rem;
+              
+              .action-btn {
+                flex: 1;
+                font-size: 0.7rem;
+                padding: 0.3rem 0.4rem;
+                
+                span {
+                  display: none;
+                }
+                
+                svg {
+                  width: 12px;
+                  height: 12px;
+                }
+              }
+            }
+          }
+        }
+      }
+      
+      .post-card {
+        .post-header {
+          padding: 0.75rem 0.75rem 0.5rem;
+        }
+        
+        .post-content {
+          padding: 0.5rem 0.75rem;
+        }
+        
+        .post-actions {
+          padding: 0.75rem;
+          flex-direction: column;
+          gap: 1rem;
+          align-items: stretch;
+          
+          .action-buttons {
+            justify-content: center;
+            flex-wrap: wrap;
+            
+            .share-dropdown {
+              .share-menu {
+                width: 280px;
+                max-width: calc(100vw - 30px);
+                left: 50% !important;
+                right: auto !important;
+                transform: translateX(-50%) translateY(10px);
+                flex-wrap: wrap;
+                justify-content: center;
+                
+                &.visible, &:hover {
+                  transform: translateX(-50%) translateY(0);
+                }
+                
+                &::after {
+                  left: 50% !important;
+                  right: auto !important;
+                  margin-left: -6px;
+                }
+                
+                .share-option {
+                  width: 54px;
+                  padding: 0.5rem;
+                  font-size: 0.7rem;
+                  margin-bottom: 3px;
+                }
+              }
+            }
+          }
+          
+          .post-meta-info {
+            justify-content: center;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/_sass/components/_pagination.scss b/_sass/components/_pagination.scss
index a7ccb78..dd952f1 100644
--- a/_sass/components/_pagination.scss
+++ b/_sass/components/_pagination.scss
@@ -114,20 +114,74 @@
 /* Responsive pagination for mobile devices */
 @media (max-width: 768px) {
   .pagination {
-    flex-direction: column;
-    gap: 1.25rem;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    margin: 2rem 0;
+    padding: 1rem;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
     
     .pagination-pages {
-      order: -1;
-      margin-bottom: 0.5rem;
-      flex-wrap: wrap;
+      order: 0;
+      margin: 0 0.25rem;
+      flex-wrap: nowrap;
       justify-content: center;
+      gap: 0.1rem;
+      flex: 0 1 auto;
+      
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+    
+    .pagination-link,
+    .pagination-current {
+      min-width: 1.8rem;
+      height: 1.8rem;
+      font-size: 0.8rem;
+      margin: 0.05rem;
     }
     
     .pagination-previous,
     .pagination-next {
-      min-width: 120px;
+      min-width: 60px;
       justify-content: center;
+      font-size: 0.75rem;
+      padding: 0.4rem 0.3rem;
+      order: 0;
+      flex-shrink: 0;
+    }
+  }
+}
+
+/* Extra small devices */
+@media (max-width: 480px) {
+  .pagination {
+    padding: 0.5rem;
+    margin: 1.5rem 0;
+    gap: 0.15rem;
+    
+    .pagination-pages {
+      margin: 0 0.15rem;
+      gap: 0.05rem;
+      
+      .pagination-link,
+      .pagination-current {
+        min-width: 1.6rem;
+        height: 1.6rem;
+        font-size: 0.75rem;
+        margin: 0.02rem;
+      }
+    }
+    
+    .pagination-previous,
+    .pagination-next {
+      min-width: 50px;
+      font-size: 0.7rem;
+      padding: 0.3rem 0.2rem;
     }
   }
 }
diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
index e3c5b6e..3e9720a 100644
--- a/_sass/components/_search.scss
+++ b/_sass/components/_search.scss
@@ -82,7 +82,6 @@
     align-items: center;
     justify-content: space-between;
     padding: 1rem 1.5rem;
-    border-bottom: 1px solid var(--border-color, #edf2f7);
     
     h2 {
       margin: 0;
@@ -138,7 +137,6 @@
       margin-top: 1.5rem;
       text-align: center;
       padding-top: 1rem;
-      border-top: 1px solid var(--border-color, #edf2f7);
       
       a {
         display: inline-block;
diff --git a/assets/css/extended.scss b/assets/css/extended.scss
index ccb88c3..6da899d 100644
--- a/assets/css/extended.scss
+++ b/assets/css/extended.scss
@@ -11,6 +11,7 @@
 @import "components/code";
 @import "components/toc";
 @import "components/homepage";
+@import "components/home-v2";
 @import "components/pagination";
 @import "components/related-posts";
 @import "components/social-sharing";
diff --git a/assets/css/main.scss b/assets/css/main.scss
index e31a7f6..a8332ae 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -17,3 +17,4 @@
 @import "components/taxonomy-filter";
 @import "components/footer";
 @import "components/contact";
+@import "components/home-v2";
diff --git a/assets/images/icons/default-category.svg b/assets/images/icons/default-category.svg
new file mode 100644
index 0000000..92e5933
--- /dev/null
+++ b/assets/images/icons/default-category.svg
@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <!-- Background circle with gradient -->
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.9" />
+      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.7" />
+    </linearGradient>
+  </defs>
+  
+  <!-- Background circle -->
+  <circle cx="50" cy="50" r="45" fill="url(#bgGradient)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
+  
+  <!-- Document/Article icon -->
+  <g fill="url(#iconGradient)" stroke="none">
+    <!-- Document background -->
+    <rect x="25" y="20" width="50" height="60" rx="4" ry="4" fill="url(#iconGradient)"/>
+    
+    <!-- Document lines representing text -->
+    <rect x="32" y="30" width="36" height="2" rx="1" fill="rgba(102, 126, 234, 0.6)"/>
+    <rect x="32" y="36" width="30" height="2" rx="1" fill="rgba(102, 126, 234, 0.6)"/>
+    <rect x="32" y="42" width="33" height="2" rx="1" fill="rgba(102, 126, 234, 0.6)"/>
+    <rect x="32" y="48" width="28" height="2" rx="1" fill="rgba(102, 126, 234, 0.6)"/>
+    
+    <!-- Small decorative element (like a bookmark or tag) -->
+    <polygon points="65,20 75,20 75,35 70,30 65,35" fill="rgba(118, 75, 162, 0.8)"/>
+  </g>
+  
+  <!-- Subtle shadow effect -->
+  <circle cx="50" cy="52" r="45" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="0.5"/>
+</svg>
diff --git a/assets/images/social-media-inspired-home-layout.webp b/assets/images/social-media-inspired-home-layout.webp
new file mode 100644
index 0000000..3fe9715
Binary files /dev/null and b/assets/images/social-media-inspired-home-layout.webp differ
diff --git a/assets/js/home-v2.js b/assets/js/home-v2.js
new file mode 100644
index 0000000..e5a7cd9
--- /dev/null
+++ b/assets/js/home-v2.js
@@ -0,0 +1,131 @@
+// Social Media Inspired Homepage (home-v2) JavaScript
+// Interactive features for social media-style engagement
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Only run on home-v2 layout
+  if (!document.querySelector('.home-v2')) return;
+  
+  // Initialize all features
+  initViewToggle();
+  initFilterTabs();
+  
+  // View Toggle (Feed/Grid)
+  function initViewToggle() {
+    const viewToggles = document.querySelectorAll('.view-toggle');
+    const postsContainer = document.querySelector('.posts-feed');
+    const STORAGE_KEY = 'home-v2-view-mode';
+    
+    // Restore saved view state on page load
+    const savedView = localStorage.getItem(STORAGE_KEY) || 'feed';
+    applyViewStyle(savedView);
+    updateActiveToggle(savedView);
+    
+    viewToggles.forEach(toggle => {
+      toggle.addEventListener('click', function() {
+        const view = this.dataset.view;
+        
+        // Save view preference to localStorage
+        localStorage.setItem(STORAGE_KEY, view);
+        
+        // Apply view style
+        applyViewStyle(view);
+        updateActiveToggle(view);
+      });
+    });
+    
+    // Helper function to apply view styles
+    function applyViewStyle(view) {
+      if (view === 'grid') {
+        postsContainer.classList.add('grid-view');
+        postsContainer.style.display = 'grid';
+        postsContainer.style.gridTemplateColumns = 'repeat(auto-fit, minmax(350px, 1fr))';
+        postsContainer.style.gap = '1.5rem';
+        
+        // Adjust post cards for grid view
+        document.querySelectorAll('.post-card').forEach(card => {
+          card.style.marginBottom = '0';
+        });
+      } else {
+        postsContainer.classList.remove('grid-view');
+        postsContainer.style.display = 'flex';
+        postsContainer.style.flexDirection = 'column';
+        postsContainer.style.gap = '2rem';
+        postsContainer.style.gridTemplateColumns = 'none';
+        
+        // Reset post cards for feed view
+        document.querySelectorAll('.post-card').forEach(card => {
+          card.style.marginBottom = '';
+        });
+      }
+    }
+    
+    // Helper function to update active toggle button
+    function updateActiveToggle(view) {
+      viewToggles.forEach(btn => btn.classList.remove('active'));
+      const activeToggle = document.querySelector(`.view-toggle[data-view="${view}"]`);
+      if (activeToggle) {
+        activeToggle.classList.add('active');
+      }
+    }
+  }
+  
+  // Filter Tabs (All Posts / Featured)
+  function initFilterTabs() {
+    const filterTabs = document.querySelectorAll('.filter-tab');
+    const allPostsContainer = document.getElementById('posts-feed');
+    const featuredPostsContainer = document.getElementById('posts-featured');
+    
+    filterTabs.forEach(tab => {
+      tab.addEventListener('click', function() {
+        const filter = this.dataset.filter;
+        
+        // Remove active class from all tabs
+        filterTabs.forEach(t => t.classList.remove('active'));
+        // Add active class to clicked tab
+        this.classList.add('active');
+        
+        // Show/hide containers based on filter
+        if (filter === 'featured') {
+          // Show featured posts, hide all posts
+          allPostsContainer.style.display = 'none';
+          featuredPostsContainer.style.display = 'flex';
+        } else {
+          // Show all posts, hide featured posts
+          allPostsContainer.style.display = 'flex';
+          featuredPostsContainer.style.display = 'none';
+        }
+      });
+    });
+  }
+
+  // Add animations and transitions
+  const style = document.createElement('style');
+  style.textContent = `
+    @keyframes spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    
+    .post-card {
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+    
+    .story-item.active .avatar-ring {
+      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
+      padding: 3px !important;
+    }
+    
+    .action-btn {
+      transition: all 0.2s ease;
+    }
+    
+    .action-btn:hover {
+      transform: translateY(-1px);
+    }
+    
+    .load-icon {
+      transition: transform 0.3s ease;
+    }
+  `;
+  document.head.appendChild(style);
+});
diff --git a/docs/home-v2-layout.md b/docs/home-v2-layout.md
new file mode 100644
index 0000000..a4094d2
--- /dev/null
+++ b/docs/home-v2-layout.md
@@ -0,0 +1,484 @@
+---
+title: "Home-v2 Layout: Social Media Inspired Design"
+description: "Learn how to use the social media-inspired home-v2 layout for modern, engaging blog homepages"
+layout: docs
+---
+
+# Home-v2 Layout: Social Media Inspired Design
+
+The `home-v2` layout provides a modern, social media-inspired alternative to the traditional blog homepage. This layout encourages visitors to explore content through Instagram-style stories, engaging post cards, and an elegant sidebar with comprehensive interactive features.
+
+## Features
+
+### 🎯 Instagram-Style Stories Navigation
+- Category-based story navigation with gradient rings and visual feedback
+- Smooth scrolling and interactive filtering by category
+- Touch-friendly design optimized for mobile interactions
+- Custom imagery support with emoji fallbacks for categories
+- Gradient ring animations for active and featured categories
+
+### 📱 Social Media-Style Post Cards
+- Clean, card-based design with author avatars and personal touch
+- Reading time estimates and publication dates for context
+- Featured post badges to highlight important content
+- Interactive action buttons for seamless engagement
+- Responsive design that adapts to different screen sizes
+
+### 🔧 Interactive Controls & Views
+- **Filter Tabs**: All Posts, Featured (quick content filtering)
+- **View Toggles**: Feed view (vertical scrolling) vs Grid view (Pinterest-style)
+- **Progressive Loading**: Smooth pagination without page refreshes
+- **View Persistence**: Remembers user's preferred view mode
+- **Performance Optimized**: Only loads content as needed
+
+### 📊 Engaging Sidebar Experience
+- **Profile Card**: Author information with site statistics
+- **Site Statistics**: Dynamic metrics showcase (total posts, categories, tags)
+- **Popular Tags**: Dynamic tag cloud with smart styling
+- **Trending Categories**: Highlight most popular content areas
+- **Quick Navigation**: Fast access to important pages
+- **Content Discovery**: Widgets that keep readers engaged
+
+### ⚡ Smart Action Buttons
+- **Read Article**: Direct navigation to the full post
+- **Comments**: Jump straight to the Giscus comment section
+- **Share Dropdown**: Native sharing with fallback to copy-to-clipboard
+- **Social Integration**: Twitter, Facebook, LinkedIn sharing options
+- **Accessibility**: Full keyboard navigation and ARIA labels
+
+### 🎨 Advanced Theming & Dark Mode
+- **Automatic Dark Mode**: Respects user's OS settings
+- **CSS Custom Properties**: 20+ customizable theme variables
+- **High Contrast**: Readable in both light and dark modes
+- **System Integration**: Seamless theme switching
+- **Consistent Experience**: All components support both themes
+
+### ⚡ Performance & Technical Excellence
+- **Lazy Loading**: Images load only when needed
+- **Optimized JavaScript**: Minimal, efficient interactions
+- **Progressive Enhancement**: Works with JavaScript disabled
+- **Semantic HTML**: Screen reader friendly structure
+- **Modern Browser Support**: Chrome 80+, Firefox 80+, Safari 13+, Edge 80+
+
+## How to Use
+
+### 1. Enable the Layout
+
+Create a new page or modify an existing one to use the `home-v2` layout:
+
+```yaml
+---
+layout: home-v2
+title: "Welcome to My Blog"
+description: "A modern, social media-inspired homepage"
+---
+```
+
+### 2. Configure Site Settings
+
+Add comprehensive author information to your `_config.yml`:
+
+```yaml
+author: "Your Name"
+author_avatar: "/assets/images/author.jpg"
+description: "Your engaging site description for the profile card"
+
+# Optional: Homepage widgets configuration
+home:
+  stats_widget: 
+    enabled: true
+    title: "Site Statistics"
+
+# Social media links for profile card
+social:
+  twitter: "yourusername"
+  github: "yourusername"
+  linkedin: "yourusername"
+```
+
+### 3. Optimize Your Posts
+
+For the best experience, use comprehensive post frontmatter:
+
+```yaml
+---
+title: "Your Post Title"
+author: "Author Name"
+author_avatar: "/assets/images/author-avatar.jpg"
+featured: true  # For featured badge and enhanced visibility
+categories: [Category1, Category2]
+tags: [tag1, tag2, tag3]
+image: "post-featured-image.jpg"
+description: "Engaging post description for card previews"
+reading_time: 5  # minutes (optional, auto-calculated if not provided)
+---
+```
+
+### 4. Add Category Images (Optional)
+
+Place category-specific images in `/assets/images/categories/` for enhanced visual appeal:
+- `tutorial.jpg` or `tutorial.webp`
+- `features.jpg` or `features.webp`
+- `demo.jpg` or `demo.webp`
+- etc.
+
+The layout gracefully falls back to emoji representations and default icons if images aren't available.
+
+### 5. Configure Sidebar Widgets (Optional)
+
+Customize sidebar widgets in your `_config.yml`:
+
+```yaml
+# Sidebar configuration
+sidebar:
+  stats:
+    show_posts: true
+    show_categories: true
+    show_tags: true
+    show_reading_time: true
+  
+  popular_tags:
+    limit: 10
+    show_count: true
+  
+  trending_categories:
+    limit: 6
+    show_count: true
+```
+
+## Customization
+
+### CSS Variables
+
+The layout uses CSS custom properties for easy theming:
+
+```css
+:root {
+  --home-v2-bg: #fafafa;
+  --home-v2-card-bg: #ffffff;
+  --home-v2-text: #1f2937;
+  --home-v2-text-muted: #6b7280;
+  --home-v2-border: #e2e8f0;
+  --home-v2-primary: #3b82f6;
+  --home-v2-accent: #8b5cf6;
+  /* ... more variables */
+}
+```
+
+### Dark Mode
+
+The layout automatically supports dark mode through media queries:
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --home-v2-bg: #0f172a;
+    --home-v2-card-bg: #1e293b;
+    /* ... dark theme variables */
+  }
+}
+```
+
+### JavaScript Features
+
+The layout includes comprehensive interactive JavaScript features:
+
+- **Stories Navigation**: Click story items to filter posts by category with smooth animations
+- **Post Filtering**: Use filter tabs to show all posts or featured posts only
+- **View Toggle**: Switch between feed view (vertical) and grid view (Pinterest-style) with persistence
+- **View Persistence**: Remembers user's preferred view mode using localStorage
+- **Share Actions**: Native Web Share API with fallback to copy-to-clipboard
+- **Progressive Loading**: Smooth pagination with loading states
+- **Touch Interactions**: Optimized for mobile with proper touch targets
+- **Keyboard Navigation**: Full accessibility support with proper focus management
+- **Responsive Animations**: Smooth transitions and micro-interactions
+- **Performance Optimization**: Debounced interactions and efficient DOM updates
+
+### Interactive Features Details
+
+#### View Toggle Functionality
+- **Feed View**: Traditional blog layout with vertical scrolling (default)
+- **Grid View**: Pinterest-style grid layout for visual content browsing
+- **Smart Persistence**: Saves user preference and restores on page reload
+- **Responsive Grid**: Automatically adjusts columns based on screen size
+- **Smooth Transitions**: Animated switching between view modes
+
+#### Filter System
+- **All Posts**: Complete content library display
+- **Featured Posts**: Curated content highlighting
+- **Category Filtering**: Stories navigation provides category-based filtering
+- **Real-time Updates**: Instant content filtering without page refreshes
+- **Visual Feedback**: Clear indication of active filters and states
+
+#### Share Integration
+- **Native Sharing**: Uses Web Share API where available
+- **Social Platforms**: Direct sharing to Twitter, Facebook, LinkedIn
+- **Copy Link**: Fallback copy-to-clipboard functionality
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+- **User Feedback**: Visual confirmation of successful actions
+
+## Responsive Design
+
+The layout is fully responsive:
+
+- **Desktop (1024px+)**: Full layout with sidebar
+- **Tablet (768px-1024px)**: Hides sidebar, single column
+- **Mobile (<768px)**: Optimized touch interactions, compact design
+
+## Best Practices
+
+### Content Strategy
+1. **Use Featured Posts Strategically**: Highlight your best content for maximum visibility in the featured filter
+2. **Organize with Clear Categories**: Create logical content groupings for intuitive stories navigation
+3. **Write Engaging Excerpts**: First paragraphs become card previews, so make them compelling
+4. **Tag Strategically**: Popular tags widget showcases your content themes and improves discoverability
+5. **Balance Content Types**: Mix different post types to create visual variety in the feed
+6. **Regular Publishing**: Maintain consistent posting schedule to keep the homepage fresh
+
+### Visual Optimization
+1. **Optimize Images**: Use WebP format and appropriate sizes for faster loading
+2. **Author Avatars**: Use personal photos to create connection and trust with readers
+3. **Category Images**: Custom imagery enhances stories navigation visual appeal
+4. **Consistent Branding**: Maintain visual consistency across all elements and components
+5. **Featured Images**: Use high-quality, consistent aspect ratios for post cards
+6. **Color Harmony**: Ensure category colors work well with your overall theme
+
+### Performance Optimization
+1. **Image Compression**: Compress images for faster loading without quality loss
+2. **Content Planning**: Balance featured vs. regular posts for optimal performance
+3. **Mobile Testing**: Ensure great experience on all devices and screen sizes
+4. **Browser Testing**: Test across different browsers for consistent functionality
+5. **Lazy Loading**: Leverage built-in lazy loading for images beyond the fold
+6. **Caching Strategy**: Use appropriate caching headers for static assets
+
+### User Experience
+1. **Responsive Design**: Test thoroughly on mobile, tablet, and desktop viewports
+2. **Touch Interactions**: Ensure all interactive elements work well on touch devices
+3. **Loading States**: Provide clear feedback during content loading and filtering
+4. **Error Handling**: Graceful fallbacks when JavaScript is disabled or fails
+5. **Accessibility**: Test with screen readers and keyboard-only navigation
+6. **Page Speed**: Monitor and optimize Core Web Vitals for better user experience
+
+### SEO & Discoverability
+1. **Structured Data**: Ensure proper schema markup for posts and author information
+2. **Meta Descriptions**: Write compelling descriptions that work as card previews
+3. **URL Structure**: Use clear, descriptive URLs for categories and posts
+4. **Internal Linking**: Leverage the sidebar widgets for strategic internal linking
+5. **Social Sharing**: Optimize for social media sharing with proper Open Graph tags
+6. **XML Sitemap**: Keep your sitemap updated with new content and categories
+
+## Switching Between Layouts
+
+You can easily switch between the traditional `home` layout and the new `home-v2` layout:
+
+**Traditional Blog Layout (home.html)**:
+```yaml
+---
+layout: home
+---
+```
+
+**Social Media Inspired Layout (home-v2.html)**:
+```yaml
+---
+layout: home-v2
+---
+```
+
+## Browser Support
+
+The home-v2 layout supports all modern browsers with graceful degradation:
+- **Chrome 80+** - Full feature support including native sharing
+- **Firefox 80+** - Complete functionality with all interactive features
+- **Safari 13+** - Full compatibility including iOS Safari
+- **Edge 80+** - Complete feature set with Chromium engine
+
+**Advanced Features**: Some features like native Web Share API may not be available on all browsers, with smart fallbacks provided for universal compatibility.
+
+## Roadmap & Future Features
+
+The home-v2 layout is continuously evolving. Planned enhancements include:
+
+### Coming Soon
+- **Enhanced Analytics Integration**: Deeper insights into content performance and user engagement
+- **Advanced Filtering Options**: More granular content discovery with custom filter categories
+- **Social Media Integration**: Direct posting and syndication features for major platforms
+- **User Personalization**: Customizable layouts and individual user preferences
+- **Performance Monitoring**: Built-in Core Web Vitals tracking and optimization suggestions
+
+### Under Consideration
+- **Real-time Updates**: Live content updates without page refreshes
+- **Progressive Web App**: Enhanced offline functionality and app-like experience
+- **Advanced Search**: Full-text search integration with the stories interface
+- **Content Recommendations**: AI-powered content suggestions based on reading patterns
+- **Multi-language Support**: Internationalization for global audiences
+
+### Community Requests
+We actively consider community feedback for future development. Popular requests include:
+- Custom story animations and transitions
+- Integration with external content management systems
+- Advanced SEO optimization tools
+- Enhanced social sharing analytics
+- Custom widget development framework
+
+**Stay Updated**: Follow our [GitHub repository](https://github.com/awcodify/arsxy-theme) for the latest updates and release announcements.
+
+## Troubleshooting
+
+### Stories Not Showing
+- **Check Categories**: Ensure you have categories defined in your posts' frontmatter
+- **Verify Images**: Check that category images exist in `/assets/images/categories/` or confirm emoji fallbacks are working
+- **Category Limit**: The layout displays a maximum of 8 categories in stories navigation
+- **Post Requirements**: Categories need at least one post with content to appear in stories
+
+### JavaScript Features Not Working
+- **Verify Script Loading**: Ensure `home-v2.js` is properly loaded and accessible
+- **Check Console**: Look for JavaScript errors in browser developer console
+- **Layout Class**: Confirm the layout class `.home-v2` is present in the HTML
+- **DOM Elements**: Verify required DOM elements exist (filter tabs, view toggles, etc.)
+- **Browser Support**: Confirm browser supports modern JavaScript features
+
+### Styling Issues
+- **SCSS Import**: Check that `_home-v2.scss` is imported in your main stylesheet
+- **CSS Variables**: Verify CSS custom properties are supported in target browsers
+- **Dark Mode**: Test both light and dark modes separately for styling consistency
+- **Responsive Design**: Test across different screen sizes and device orientations
+- **Cache Issues**: Clear browser cache and rebuild site to see style changes
+
+### Performance Issues
+- **Image Optimization**: Ensure images are properly compressed and sized
+- **Loading Speed**: Check for large files or unoptimized assets
+- **JavaScript Performance**: Monitor for memory leaks or excessive DOM manipulation
+- **Network Issues**: Verify all assets are loading correctly from CDN or local sources
+- **Bundle Size**: Check JavaScript and CSS bundle sizes for optimization opportunities
+
+### View Toggle Problems
+- **LocalStorage**: Ensure browser supports localStorage for view persistence
+- **Grid Layout**: Verify CSS Grid support in target browsers
+- **Toggle Buttons**: Check that view toggle buttons have proper data attributes
+- **Container Elements**: Confirm posts container has correct CSS classes
+
+### Share Functionality Issues
+- **Web Share API**: Native sharing requires HTTPS and modern browser support
+- **Fallback System**: Verify copy-to-clipboard fallback works when native sharing unavailable
+- **Social Links**: Check that social sharing URLs are properly formatted
+- **Permissions**: Ensure any required permissions are granted for native sharing
+
+### Mobile Responsiveness
+- **Touch Targets**: Verify all interactive elements meet minimum touch target sizes (44px)
+- **Viewport Meta**: Ensure proper viewport meta tag is present
+- **Touch Events**: Test touch interactions work correctly on mobile devices
+- **Scroll Performance**: Check for smooth scrolling and no layout shifts
+
+### Content Display Issues
+- **Featured Posts**: Verify featured posts have `featured: true` in frontmatter
+- **Author Information**: Check author names and avatar paths are correct
+- **Reading Time**: Ensure reading time calculation is working properly
+- **Post Excerpts**: Verify post excerpts or first paragraphs display correctly
+
+### Getting Help
+If you're still experiencing issues:
+
+1. **Check Documentation**: Review the [complete documentation](index.md) for additional guidance
+2. **Browser DevTools**: Use browser developer tools to inspect HTML, CSS, and JavaScript
+3. **Community Support**: Ask questions in [GitHub Discussions](https://github.com/awcodify/arsxy-theme/discussions)
+4. **Bug Reports**: Report bugs via [GitHub Issues](https://github.com/awcodify/arsxy-theme/issues)
+5. **Example Sites**: Compare with working examples and demo implementations
+
+## Examples & Implementation
+
+### Live Demo
+- **[Demo Site](/v2/)**: Experience the layout in action with sample content
+- **[Development Server](http://127.0.0.1:4000/v2/)**: Local demo when development server is running
+
+### Sample Configurations
+
+#### Minimal Setup
+```yaml
+---
+layout: home-v2
+title: "My Blog"
+---
+```
+
+#### Full Configuration
+```yaml
+---
+layout: home-v2
+title: "Welcome to My Social Blog"
+description: "A modern, engaging homepage for my content"
+sidebar: true
+featured_limit: 6
+categories_limit: 8
+---
+```
+
+#### Advanced Post Setup
+```yaml
+---
+title: "Building Modern Web Experiences"
+author: "Jane Developer"
+author_avatar: "/assets/images/authors/jane.jpg"
+featured: true
+categories: [Web Development, UI/UX, Modern Design]
+tags: [javascript, css, responsive, user-experience]
+image: "web-experiences-hero.webp"
+description: "Learn how to create engaging, modern web experiences that delight users and drive engagement."
+reading_time: 8
+date: 2025-05-30
+---
+```
+
+### Integration Examples
+
+#### With Jekyll Collections
+```yaml
+# _config.yml
+collections:
+  tutorials:
+    output: true
+    permalink: /:collection/:name/
+  
+# Use in home-v2 layout
+layout: home-v2
+include_collections: ['tutorials']
+```
+
+#### With Custom Filters
+```javascript
+// Custom filtering for specific categories
+document.addEventListener('DOMContentLoaded', function() {
+  const customFilters = ['tutorial', 'featured', 'popular'];
+  // Implementation for custom filter logic
+});
+```
+
+### Deployment Considerations
+
+#### GitHub Pages
+```yaml
+# _config.yml for GitHub Pages
+plugins:
+  - jekyll-sitemap
+  - jekyll-seo-tag
+  
+# Ensure proper base URL
+url: "https://yourusername.github.io"
+baseurl: "/your-repository-name"
+```
+
+#### Netlify Deployment
+```toml
+# netlify.toml
+[build]
+  command = "bundle exec jekyll build"
+  publish = "_site"
+
+[build.environment]
+  RUBY_VERSION = "3.0.0"
+```
+
+For more implementation examples and advanced customization, see:
+- **[Customization Guide](customization.md)** - Advanced theming and modifications
+- **[Performance Guide](performance.md)** - Optimization best practices
+- **[Contributing Guide](contributing.md)** - How to contribute improvements
diff --git a/docs/index.md b/docs/index.md
index 3715a97..54d19c1 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -15,6 +15,7 @@ Welcome to the official documentation for Arsxy Theme, a clean, modern Jekyll th
 ## Core Features
 
 * [Layout Options](./layouts/)
+* [Home-v2 Layout (Social Media Inspired)](./home-v2-layout/)
 * [Dark Mode](./dark-mode/)
 * [SEO Optimization](./seo/)
 * [Responsive Design](./responsive-design/)
diff --git a/docs/layouts.md b/docs/layouts.md
index 51a691c..5990932 100644
--- a/docs/layouts.md
+++ b/docs/layouts.md
@@ -30,6 +30,29 @@ title: Home
 ---
 ```
 
+### Home-v2 Layout (Social Media Inspired)
+**New!** The home-v2 layout provides a modern, social media-inspired alternative to the traditional blog homepage. This layout encourages visitors to explore content through Instagram-style stories, engaging post cards, and an elegant sidebar.
+
+**Key Features:**
+- Instagram-style category stories with gradient rings
+- Social media-style post cards with author avatars
+- Interactive filter tabs (All Posts, Featured)
+- Feed/Grid view toggle
+- Engaging sidebar with profile card and trending topics
+- Smart action buttons (Read, Comments, Share)
+- Fully responsive design with dark mode support
+
+**Usage:**
+```yaml
+---
+layout: home-v2
+title: "Social Media Inspired Home"
+description: "A modern homepage layout"
+---
+```
+
+**Learn More:** See the [Home-v2 Layout Guide](home-v2-layout.md) for detailed setup and customization instructions.
+
 ### Post Layout
 This layout is optimized for blog posts. It includes features like reading time estimation, author information, social sharing buttons, and related posts.
 
diff --git a/v2.md b/v2.md
new file mode 100644
index 0000000..7fd84b0
--- /dev/null
+++ b/v2.md
@@ -0,0 +1,5 @@
+---
+layout: home-v2
+title: "Social Media Inspired Home"
+description: "A modern, social media-inspired homepage layout for Jekyll blogs"
+---