diff --git a/templates/index.html b/templates/index.html
index 80118f4..24135ec 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,10 +12,47 @@
 
 <body>
     <div class="container">
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">{{ config.TITLE }}</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active"  data-en_XX="Home" data-zh_CN="主页">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link"  data-en_XX="Help" data-zh_CN="帮助">Help</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link"  data-en_XX="About" data-zh_CN="关于">About</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <div class="input-group">
+                        <label class="input-group-text" for="language" data-en_XX="Language"
+                            data-zh_CN="语言">Language</label>
+                        <select class="form-select" id="language">
+                            <option value="zh_CN">中文</option>
+                            <option selected value="en_XX">English</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
         <div class="card mb-3">
+            <div class="card-header">
+                <span>Stable Diffusion</span>
+            </div>
             <div class="card-body">
                 <div class="row">
-                    <div class="col-md-8 mb-3">
+                    <div class="col mb-3">
                         <div class="input-group">
                             <label for="apiKey" class="input-group-text" data-en_XX="API Key" data-zh_CN="API 密钥">API
                                 Key</label>
@@ -27,16 +64,6 @@
                                 data-zh_CN="生成非公开图片">Generate Private Images</label>
                         </div>
                     </div>
-                    <div class="col-md-4 mb-3">
-                        <div class="input-group">
-                            <label class="input-group-text" for="language" data-en_XX="Language"
-                                data-zh_CN="语言">Language</label>
-                            <select class="form-select" id="language">
-                                <option value="zh_CN">中文</option>
-                                <option selected value="en_XX">English</option>
-                            </select>
-                        </div>
-                    </div>
                 </div>
                 <div class="row mb-3">
                     <div class="input-group">
@@ -113,7 +140,7 @@
                     </div>
                 </div>
                 <div class="card">
-                    <div class="card-header">
+                    <div class="stable-diffusion card-header">
                         <ul class="nav nav-pills card-header-pills">
                             <li class="nav-item">
                                 <a class="nav-link" href="#card-txt" data-en_XX="Text-to-Image"
@@ -129,7 +156,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="card-body card-specific" id="card-img" style="display:none">
+                    <div class="card-body stable-diffusion-specific" id="card-img" style="display:none">
                         <div class="row">
                             <div class="col-md-4">
                                 <div class="card">
@@ -204,7 +231,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="card-body card-specific" id="card-inpainting" style="display:none">
+                    <div class="card-body stable-diffusion-specific" id="card-inpainting" style="display:none">
                         <div class="row">
                             <div class="col-md-4">
                                 <div class="card">
@@ -295,7 +322,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="card-body card-specific" id="card-txt" style="display:none">
+                    <div class="card-body stable-diffusion-specific" id="card-txt" style="display:none">
                         <div class="row mb-3">
                             <div class="col-md-4">
                                 <div class="card">
@@ -347,9 +374,10 @@
             </div>
         </div>
 
-
-        <div class="card">
-            <div class="card-header" data-en_XX="History" data-zh_CN="历史">History</div>
+        <div class="card mb-3">
+            <div class="card-header">
+                <span data-en_XX="History" data-zh_CN="历史">History</span>
+            </div>
             <div class="card-body">
                 <div class="input-group mb-3">
                     <label for="lookupUUID" class="input-group-text" data-en_XX="UUID (Optional)"
@@ -357,12 +385,22 @@
                     <input type="text" class="form-control" id="lookupUUID" value="">
                     <button id="getJobHistory" class="btn btn-primary" data-en_XX="Get Job(s)" data-zh_CN="搜索历史">Get
                         Job(s)</button>
-                    <button id="feelingLucky" class="btn btn-outline-secondary" data-en_XX="I'm Feeling Lucky"
-                        data-zh_CN="看看别人的结果">I'm Feeling Lucky</button>
                 </div>
                 <div id="joblist"></div>
             </div>
         </div>
+
+        <div class="card mb-3">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <span data-en_XX="Get Inspirations from Others" data-zh_CN="从别人那里找灵感">Get Inspirations from
+                    Others</span>
+                <button id="feelingLucky" class="btn btn-outline-secondary" data-en_XX="Change a batch"
+                    data-zh_CN="换一批">Change a batch</button>
+            </div>
+            <div class="card-body">
+                <div id="othersJobList"></div>
+            </div>
+        </div>
     </div>
 
     <!-- CSS code -->
@@ -530,7 +568,7 @@
                     top: clickedPosition.top,
                     left: clickedPosition.left
                 }).animate({
-                    top: input.offset().top ,
+                    top: input.offset().top,
                     left: input.offset().left,
                     opacity: 0
                 }, 500, function () {
@@ -662,11 +700,11 @@
                     success: function (response) {
                         var jobsLength = response.jobs.length;
                         if (jobsLength == 0) {
-                            $('#joblist').html("found nothing");
+                            $('#othersJobList').html("found nothing");
                             return;
                         }
 
-                        var $joblist = $('#joblist');
+                        var $joblist = $('#othersJobList');
                         var $grid = $('<div class="row"></div>');
                         $joblist.html($grid);
                         for (var i = 0; i < jobsLength; i++) {
@@ -693,10 +731,11 @@
                     error: function (xhr, status, error) {
                         // Handle error response
                         console.log(xhr.responseText);
-                        $('#joblist').html("found nothing");
+                        $('#othersJobList').html("found nothing");
                     }
                 });
             });
+            $('#feelingLucky').click();
 
             $("#upload-img").click(function () {
                 var input = $("<input type='file' accept='image/*'>").on("change", function () {
@@ -710,19 +749,19 @@
                 input.click();
             });
 
-            var activeLink = localStorage.getItem('activeLink') || $('.nav-link:first').attr('href');
+            var activeLink = localStorage.getItem('activeLink') || $('.stable-diffusion .nav-link:first').attr('href');
 
             // Set the active link as the current active link
-            $('.nav-link[href="' + activeLink + '"]').addClass('active');
+            $('.stable-diffusion .nav-link[href="' + activeLink + '"]').addClass('active');
             $(activeLink).show();
 
-            $(".nav-link").click(function (e) {
+            $(".stable-diffusion .nav-link").click(function (e) {
                 e.preventDefault();
                 var target = $(this).attr("href"); // get the href value of the clicked link
 
                 // hide all card divs and show the corresponding one
-                $(".card-specific").hide();
-                $(".nav-link").removeClass("active");
+                $(".stable-diffusion-specific").hide();
+                $(".stable-diffusion .nav-link").removeClass("active");
                 $(this).addClass("active");
                 $(target).show();
 
