diff --git a/index.js b/index.js
index b31cec6..cda5f8f 100644
--- a/index.js
+++ b/index.js
@@ -18,8 +18,8 @@ const __dirname = path.dirname(__filename);
 
 const router = app;
 
-router.use(express.json());  // <--- Move express.json() to be first
-router.use(mbkAuthRouter);   // <--- Keep mbkAuthRouter after express.json()
+router.use(express.json());
+router.use(mbkAuthRouter);
 
 router.use(compression());
 router.use(minify());
@@ -37,7 +37,6 @@ router.use(
 );
 // Configure Handlebars
 router.engine("handlebars", engine({
-  defaultLayout: false,
   partialsDir: [
     path.join(__dirname, "views/templates"),
     path.join(__dirname, "views/notice"),
@@ -92,7 +91,7 @@ router.engine("handlebars", engine({
       // Remove the options object that is provided by Handlebars
       const options = args.pop();
       return args.every(Boolean);
-    }, 
+    },
     neq: function (a, b, options) {
       if (options && typeof options.fn === 'function') {
         return a !== b ? options.fn(this) : options.inverse(this);
@@ -144,7 +143,7 @@ router.use('/Assets/Images', express.static(path.join(__dirname, 'Assets'), {
 
 
 router.get(["/", "/info/main"], (req, res) => {
-  return res.render("staticPage/index.handlebars");
+  return res.render("staticPage/index.handlebars", { layout: false });
 });
 
 router.get(["/home", "/dashboard"], (req, res) => {
@@ -152,15 +151,15 @@ router.get(["/home", "/dashboard"], (req, res) => {
 });
 
 router.get("/info/Terms&Conditions", (req, res) => {
-  return res.render("staticPage/Terms&Conditions");
+  return res.render("staticPage/Terms&Conditions.handlebars", { layout: false });
 });
 
 router.get("/info/FAQs", async (req, res) => {
-  res.render("staticPage/FAQs");
+  res.render("staticPage/FAQs.handlebars", { layout: false });
 });
 
 router.get("/info/Credits", async (req, res) => {
-  res.render("staticPage/Credits");
+  res.render("staticPage/Credits.handlebars"), { layout: false };
 });
 
 router.use(mbkAuthRouter);
@@ -168,22 +167,13 @@ router.use(mbkAuthRouter);
 router.use("/", mainRoutes);
 router.use("/", dashboardRoutes);
 
-router.get("/admin/*", async (req, res) => {
+router.get("/admin*", async (req, res) => {
   res.redirect("/admin/dashboard");
 });
 
 router.get('/simulate-error', (req, res, next) => {
   next(new Error('Simulated router error'));
 });
-/*
-router.get("/custom/C", (req, res) => {
-  return nextApp.render(req, res, "/Custom", req.query);
-});
-//It Render React Page, /pages
-router.get("*", (req, res) => {
-  return handleNext(req, res);
-});
-*/
 
 router.use((req, res) => {
   console.log(`Path not found: ${req.url}`);
@@ -202,7 +192,5 @@ const port = 3030;
 router.listen(port, () => {
   console.log(`router running on http://localhost:${port}`);
 });
-export default router;
-/*
-});
-*/
\ No newline at end of file
+
+export default router;
\ No newline at end of file
diff --git a/package.json b/package.json
index f675f7c..5109404 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
   "author": "Muhammad Bin Khalid",
   "license": "MIT",
   "dependencies": {
-    "@google/genai": "^0.12.0",
     "compression": "^1.8.0",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
@@ -19,7 +18,6 @@
     "express-handlebars": "^8.0.1",
     "express-minify": "^1.0.0",
     "express-minify-html": "^0.12.0",
-    "google-auth-library": "^9.15.1",
     "googleapis": "^148.0.0",
     "handlebars": "^4.7.8",
     "marked": "^15.0.7",
diff --git a/public/Assets/Images/chatbot-m.png b/public/Assets/Images/chatbot-m.png
new file mode 100644
index 0000000..2deb0d1
Binary files /dev/null and b/public/Assets/Images/chatbot-m.png differ
diff --git a/public/Assets/Images/chatbot.png b/public/Assets/Images/chatbot.png
new file mode 100644
index 0000000..cd67f5e
Binary files /dev/null and b/public/Assets/Images/chatbot.png differ
diff --git a/public/Assets/Images/dashboard.png b/public/Assets/Images/dashboard.png
new file mode 100644
index 0000000..9f3f591
Binary files /dev/null and b/public/Assets/Images/dashboard.png differ
diff --git a/routes/dashboard.js b/routes/dashboard.js
index 8f7bc85..1921502 100644
--- a/routes/dashboard.js
+++ b/routes/dashboard.js
@@ -115,6 +115,7 @@ router.get("/admin/dashboard", validateSessionAndRole("SuperAdmin"), async (req,
     });
 
     res.render("admin/dashboard.handlebars", {
+      page: "Dashboard",
       stats,
       recentChats,
       topUsers,
@@ -205,6 +206,7 @@ router.get("/admin/users", validateSessionAndRole("SuperAdmin"), async (req, res
     const availableModels = modelsResult.rows.map(row => row.ai_model);
 
     res.render("admin/users.handlebars", {
+      page: "UserManagement",
       users,
       availableModels,
       searchQuery: search || "",
@@ -329,6 +331,7 @@ router.get("/admin/chats", validateSessionAndRole("SuperAdmin"), async (req, res
     const availableModels = modelsResult.rows.map(row => row.ai_model);
 
     res.render("admin/chats.handlebars", {
+      page: "ChatManagement",
       chats,
       usernameFilter: username || "",
       selectedModel: model || "",
diff --git a/routes/main.js b/routes/main.js
index f4ef680..33b2265 100644
--- a/routes/main.js
+++ b/routes/main.js
@@ -4,47 +4,52 @@ import fetch from 'node-fetch';
 import { pool } from "./pool.js";
 import { validateSession, validateSessionAndRole } from "mbkauthe";
 import { checkMessageLimit } from "./checkMessageLimit.js";
+import { GoogleAuth } from 'google-auth-library';
+import { google } from 'googleapis';
 
 dotenv.config();
 const router = express.Router();
 
+// Middleware
+router.use(express.json());
+router.use(express.urlencoded({ extended: true }));
+
 // Constants
 const DEFAULT_MODEL = 'gemini/gemini-1.5-flash';
 const DEFAULT_TEMPERATURE = 1.0;
 const DEFAULT_THEME = 'dark';
 const DEFAULT_FONT_SIZE = 16;
 const DEFAULT_DAILY_LIMIT = 100;
-const DEFAULT_PAGE_SIZE = 20;
-const IDENTITY_QUESTIONS = [
-  /who\s*(are|is)\s*you/i,
-  /what\s*(are|is)\s*you/i,
-  /your\s*(name|identity)/i,
-  /introduce\s*yourself/i,
-  /are\s*you\s*(chatgpt|gemini|ai|bot)/i
-];
 
-// Middleware
-router.use(express.json());
-router.use(express.urlencoded({ extended: true }));
+// API Clients
+let googleAuthError = null;
+let serviceusage = null;
+let projectId = null;
+
+// Initialize Google Auth
+(async () => {
+  try {
+    const auth = new GoogleAuth({
+      scopes: ['https://www.googleapis.com/auth/cloud-platform'],
+      keyFile: process.env.GOOGLE_APPLICATION_CREDENTIALS
+    });
+    const authClient = await auth.getClient();
+    projectId = await auth.getProjectId();
+    serviceusage = google.serviceusage('v1');
+  } catch (error) {
+    googleAuthError = error;
+  }
+})();
 
 // Utility Functions
 const formatChatTime = (createdAt) => {
   const now = new Date();
   const diffInSeconds = Math.floor((now - createdAt) / 1000);
 
-  const intervals = [
-    { seconds: 60, text: 'second' },
-    { seconds: 3600, text: 'minute', divisor: 60 },
-    { seconds: 86400, text: 'hour', divisor: 3600 },
-    { seconds: 2592000, text: 'day', divisor: 86400 }
-  ];
-
-  for (const interval of intervals) {
-    if (diffInSeconds < interval.seconds) {
-      const value = Math.floor(diffInSeconds / (interval.divisor || 1));
-      return `${value} ${interval.text}${value > 1 ? 's' : ''} ago`;
-    }
-  }
+  if (diffInSeconds < 60) return `${diffInSeconds} second${diffInSeconds > 1 ? 's' : ''} ago`;
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minute${Math.floor(diffInSeconds / 60) > 1 ? 's' : ''} ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hour${Math.floor(diffInSeconds / 3600) > 1 ? 's' : ''} ago`;
+  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} day${Math.floor(diffInSeconds / 86400) > 1 ? 's' : ''} ago`;
 
   return createdAt.toLocaleDateString();
 };
@@ -58,32 +63,16 @@ const handleApiError = (res, error, context) => {
   });
 };
 
-const isIdentityQuestion = (text) =>
-  IDENTITY_QUESTIONS.some(regex => regex.test(text));
-
 // Database Operations
 const db = {
-  fetchChatHistories: async (username, page = 1, pageSize = DEFAULT_PAGE_SIZE) => {
-    const offset = (page - 1) * pageSize;
-    const monthYearFormat = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long' });
-
+  fetchChatHistories: async (username) => {
     try {
-      const [countResult, chatResult] = await Promise.all([
-        pool.query(
-          'SELECT COUNT(*) FROM ai_history_chatapi WHERE username = $1',
-          [username]
-        ),
-        pool.query(
-          `SELECT id, created_at, temperature 
-           FROM ai_history_chatapi 
-           WHERE username = $1 
-           ORDER BY created_at DESC
-           LIMIT $2 OFFSET $3`,
-          [username, pageSize, offset]
-        )
-      ]);
+      const { rows } = await pool.query(
+        'SELECT id, created_at, temperature FROM Ai_history WHERE username = $1 ORDER BY created_at DESC',
+        [username]
+      );
 
-      const totalCount = parseInt(countResult.rows[0].count);
+      // Group chats by time period
       const now = new Date();
       const today = new Date(now.setHours(0, 0, 0, 0));
       const yesterday = new Date(today);
@@ -98,37 +87,58 @@ const db = {
         yesterday: [],
         last7Days: [],
         last30Days: [],
-        older: {},
-        pagination: {
-          currentPage: page,
-          pageSize,
-          totalCount,
-          totalPages: Math.ceil(totalCount / pageSize)
-        }
+        older: []
       };
 
-      chatResult.rows.forEach(row => {
+      // Month-year format for older chats
+      const monthYearFormat = new Intl.DateTimeFormat('en-US', {
+        month: 'long',
+        year: 'numeric'
+      });
+
+      rows.forEach(row => {
         const createdAt = new Date(row.created_at);
         const formattedDate = formatChatTime(createdAt);
-        const chatItem = {
-          id: row.id,
-          created_at: formattedDate,
-          temperature: row.temperature || 0.5,
-          rawDate: createdAt
-        };
+        const monthYear = monthYearFormat.format(createdAt);
 
         if (createdAt >= today) {
-          groupedChats.today.push(chatItem);
+          groupedChats.today.push({
+            id: row.id,
+            created_at: formattedDate,
+            temperature: row.temperature || 0.5,
+            rawDate: createdAt
+          });
         } else if (createdAt >= yesterday) {
-          groupedChats.yesterday.push(chatItem);
+          groupedChats.yesterday.push({
+            id: row.id,
+            created_at: formattedDate,
+            temperature: row.temperature || 0.5,
+            rawDate: createdAt
+          });
         } else if (createdAt >= sevenDaysAgo) {
-          groupedChats.last7Days.push(chatItem);
+          groupedChats.last7Days.push({
+            id: row.id,
+            created_at: formattedDate,
+            temperature: row.temperature || 0.5,
+            rawDate: createdAt
+          });
         } else if (createdAt >= thirtyDaysAgo) {
-          groupedChats.last30Days.push(chatItem);
+          groupedChats.last30Days.push({
+            id: row.id,
+            created_at: formattedDate,
+            temperature: row.temperature || 0.5,
+            rawDate: createdAt
+          });
         } else {
-          const monthYear = monthYearFormat.format(createdAt);
-          groupedChats.older[monthYear] = groupedChats.older[monthYear] || [];
-          groupedChats.older[monthYear].push(chatItem);
+          if (!groupedChats.older[monthYear]) {
+            groupedChats.older[monthYear] = [];
+          }
+          groupedChats.older[monthYear].push({
+            id: row.id,
+            created_at: formattedDate,
+            temperature: row.temperature || 0.5,
+            rawDate: createdAt
+          });
         }
       });
 
@@ -140,13 +150,7 @@ const db = {
         yesterday: [],
         last7Days: [],
         last30Days: [],
-        older: {},
-        pagination: {
-          currentPage: 1,
-          pageSize: DEFAULT_PAGE_SIZE,
-          totalCount: 0,
-          totalPages: 0
-        }
+        older: []
       };
     }
   },
@@ -154,7 +158,7 @@ const db = {
   fetchChatHistoryById: async (chatId) => {
     try {
       const { rows } = await pool.query(
-        'SELECT id, conversation_history, username, temperature FROM ai_history_chatapi WHERE id = $1',
+        'SELECT id, conversation_history, temperature FROM Ai_history WHERE id = $1',
         [chatId]
       );
       return rows[0] || null;
@@ -168,17 +172,17 @@ const db = {
     try {
       if (chatId) {
         await pool.query(
-          'UPDATE ai_history_chatapi SET conversation_history = $1, created_at = CURRENT_TIMESTAMP, temperature = $3 WHERE id = $2',
+          'UPDATE Ai_history SET conversation_history = $1, created_at = CURRENT_TIMESTAMP, temperature = $3 WHERE id = $2',
           [JSON.stringify(history), chatId, temperature]
         );
         return chatId;
+      } else {
+        const { rows } = await pool.query(
+          'INSERT INTO Ai_history (conversation_history, username, temperature) VALUES ($1, $2, $3) RETURNING id',
+          [JSON.stringify(history), username, temperature]
+        );
+        return rows[0].id;
       }
-
-      const { rows } = await pool.query(
-        'INSERT INTO ai_history_chatapi (conversation_history, username, temperature) VALUES ($1, $2, $3) RETURNING id',
-        [JSON.stringify(history), username, temperature]
-      );
-      return rows[0].id;
     } catch (error) {
       console.error("Database error saving chat history:", error);
       throw error;
@@ -186,54 +190,60 @@ const db = {
   },
 
   fetchUserSettings: async (username) => {
-    const today = new Date().toISOString().split("T")[0];
-    const defaultSettings = {
-      theme: DEFAULT_THEME,
-      font_size: DEFAULT_FONT_SIZE,
-      ai_model: DEFAULT_MODEL,
-      temperature: DEFAULT_TEMPERATURE,
-      dailyLimit: DEFAULT_DAILY_LIMIT,
-      messageCount: 0
-    };
-
     try {
+      const today = new Date().toISOString().split("T")[0];
       const [settingsResult, messageLog] = await Promise.all([
         pool.query(
-          'SELECT theme, font_size, ai_model, temperature, daily_message_limit FROM user_settings_chatapi WHERE username = $1',
+          'SELECT theme, font_size, ai_model, temperature, daily_message_limit FROM user_settings WHERE username = $1',
           [username]
         ),
         pool.query(
-          'SELECT message_count FROM user_message_logs_chatapi WHERE username = $1 AND date = $2',
+          'SELECT message_count FROM user_message_logs WHERE username = $1 AND date = $2',
           [username, today]
         )
       ]);
 
-      if (settingsResult.rows.length === 0) {
-        return defaultSettings;
-      }
-
-      return {
-        ...defaultSettings,
-        ...settingsResult.rows[0],
-        messageCount: messageLog.rows[0]?.message_count || 0
+      const messageCount = messageLog.rows[0]?.message_count || 0;
+
+      return settingsResult.rows.length > 0 ? {
+        theme: settingsResult.rows[0].theme || DEFAULT_THEME,
+        font_size: settingsResult.rows[0].font_size || DEFAULT_FONT_SIZE,
+        ai_model: settingsResult.rows[0].ai_model || DEFAULT_MODEL,
+        temperature: settingsResult.rows[0].temperature || DEFAULT_TEMPERATURE,
+        dailyLimit: settingsResult.rows[0].daily_message_limit || DEFAULT_DAILY_LIMIT,
+        messageCount
+      } : {
+        theme: DEFAULT_THEME,
+        font_size: DEFAULT_FONT_SIZE,
+        ai_model: DEFAULT_MODEL,
+        temperature: DEFAULT_TEMPERATURE,
+        dailyLimit: DEFAULT_DAILY_LIMIT,
+        messageCount: 0
       };
     } catch (error) {
       console.error("Database error fetching user settings:", error);
-      return defaultSettings;
+      return {
+        theme: DEFAULT_THEME,
+        font_size: DEFAULT_FONT_SIZE,
+        ai_model: DEFAULT_MODEL,
+        temperature: DEFAULT_TEMPERATURE,
+        dailyLimit: DEFAULT_DAILY_LIMIT,
+        messageCount: 0
+      };
     }
   },
 
   saveUserSettings: async (username, settings) => {
     try {
       await pool.query(
-        `INSERT INTO user_settings_chatapi (username, theme, font_size, ai_model, temperature)
+        `INSERT INTO user_settings (username, theme, font_size, ai_model, temperature)
          VALUES ($1, $2, $3, $4, $5)
          ON CONFLICT (username)
          DO UPDATE SET
-            theme = EXCLUDED.theme,
-            font_size = EXCLUDED.font_size,
-            ai_model = EXCLUDED.ai_model,
-            temperature = EXCLUDED.temperature,
+            theme = $2,
+            font_size = $3,
+            ai_model = $4,
+            temperature = $5,
             updated_at = CURRENT_TIMESTAMP`,
         [username, settings.theme, settings.fontSize, settings.model, settings.temperature]
       );
@@ -247,8 +257,19 @@ const db = {
 
 // AI Service Integrations
 const aiServices = {
-  formatResponse: (responseText) => {
-    if (isIdentityQuestion(responseText)) {
+
+  formatResponse: (responseText, provider) => {
+    const identityQuestions = [
+      /who\s*(are|is)\s*you/i,
+      /what\s*(are|is)\s*you/i,
+      /your\s*(name|identity)/i,
+      /introduce\s*yourself/i,
+      /are\s*you\s*(chatgpt|gemini|ai|bot)/i
+    ];
+
+    const isIdentityQuestion = identityQuestions.some(regex => regex.test(responseText));
+
+    if (isIdentityQuestion) {
       return `I'm a general purpose AI assistant developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. How can I help you today? ${responseText}`;
     }
     return responseText;
@@ -256,7 +277,6 @@ const aiServices = {
 
   gemini: async (apiKey, model, conversationHistory, temperature) => {
     const url = `https://generativelanguage.googleapis.com/v1/models/${model}:generateContent?key=${apiKey}`;
-
     try {
       const response = await fetch(url, {
         method: 'POST',
@@ -269,18 +289,12 @@ const aiServices = {
 
       if (!response.ok) {
         const errorData = await response.json();
-        const errorMessage = errorData.error?.message || 'Unknown error';
-
-        if (errorMessage.includes('You exceeded your current quota')) {
-          return `The Quota for the Gemini model "${model}" has been exceeded. Please select a different model and try again.`;
-        }
-
-        throw new Error(`Gemini API error: ${errorMessage}`);
+        throw new Error(`Gemini API error: ${errorData.error?.message || 'Unknown error'}`);
       }
 
       const data = await response.json();
       const responseText = data.candidates?.[0]?.content?.parts?.[0]?.text || "No response from Gemini API";
-      return aiServices.formatResponse(responseText);
+      return aiServices.formatResponse(responseText, 'gemini');
     } catch (error) {
       console.error("Gemini API error:", error);
       throw error;
@@ -289,7 +303,6 @@ const aiServices = {
 
   mallow: async (prompt) => {
     const url = "https://literate-slightly-seahorse.ngrok-free.app/generate";
-
     try {
       const response = await fetch(url, {
         method: 'POST',
@@ -304,14 +317,14 @@ const aiServices = {
 
       const data = await response.json();
       const responseText = data.response || "No response from Mallow API";
-      return aiServices.formatResponse(responseText);
+      return aiServices.formatResponse(responseText, 'mallow');
     } catch (error) {
       console.error("Mallow API error:", error);
       return "API service is not available. Please contact [Maaz Waheed](https://github.com/42Wor) to start the API service.";
     }
   },
 
-  nvidia: async (apiKey, model, conversationHistory) => {
+  nvidia: async (apiKey, model, conversationHistory, temperature) => {
     const url = "https://integrate.api.nvidia.com/v1/chat/completions";
     const formattedHistory = conversationHistory
       .map(message => ({
@@ -330,7 +343,7 @@ const aiServices = {
         body: JSON.stringify({
           model,
           messages: formattedHistory,
-          temperature: 0.5,
+          temperature,
           top_p: 1.0,
           max_tokens: 4096,
           stream: false
@@ -351,7 +364,7 @@ const aiServices = {
 
       const data = JSON.parse(responseBody);
       const responseText = data.choices?.[0]?.message?.content || "No response from NVIDIA API";
-      return aiServices.formatResponse(responseText);
+      return aiServices.formatResponse(responseText, 'nvidia');
     } catch (error) {
       console.error("NVIDIA API error:", error);
       throw error;
@@ -359,9 +372,9 @@ const aiServices = {
   }
 };
 
-// Routes
 router.get(["/login", "/signin"], (req, res) => {
   res.render("staticPage/login.handlebars", {
+    layout: false,
     userLoggedIn: !!req.session?.user,
     UserName: req.session?.user?.username || ''
   });
@@ -371,54 +384,27 @@ router.get("/chatbot/:chatId?", validateSessionAndRole("Any"), async (req, res)
   try {
     const { chatId } = req.params;
     const { username, role } = req.session.user;
-
-    let chatHistory = null;
-    let isChatIdOfOtherUser = false;
-
-    if (chatId) {
-      chatHistory = await db.fetchChatHistoryById(chatId);
-
-      if (!chatHistory) {
-        return res.status(404).render("templates/Error/Error.handlebars", { error: "Chat ID not found", errorCode: 404 });
-      }
-
-      if (chatHistory.username !== username && role !== "SuperAdmin") {
-        return res.status(403).render("templates/Error/Error.handlebars", { error: "Access denied for this Chat ID", errorCode: 403 });
-      }
-
-      isChatIdOfOtherUser = (chatHistory.username !== username);
-    }
-
     const userSettings = await db.fetchUserSettings(username);
 
     res.render('mainPages/chatbot.handlebars', {
+      layout: false,
       chatId: chatId || null,
       settings: {
         ...userSettings,
         temperature_value: (userSettings.temperature || DEFAULT_TEMPERATURE).toFixed(1)
       },
       UserName: username,
-      role,
-      isChatIdOfOtherUser,
-      chatIdUsername: chatHistory?.username || null,
+      role
     });
   } catch (error) {
     console.error("Error rendering chatbot page:", error);
-    res.status(500).render("templates/Error/500.handlebars", { error: "Internal Server Error" });
+    res.status(500).render("templates/Error/500", { error: error.message });
   }
 });
 
 router.get('/api/chat/histories', validateSessionAndRole("Any"), async (req, res) => {
   try {
-    const page = parseInt(req.query.page) || 1;
-    const pageSize = parseInt(req.query.pageSize) || DEFAULT_PAGE_SIZE;
-
-    const chatHistories = await db.fetchChatHistories(
-      req.session.user.username,
-      page,
-      pageSize
-    );
-
+    const chatHistories = await db.fetchChatHistories(req.session.user.username);
     res.json(chatHistories);
   } catch (error) {
     handleApiError(res, error, "fetching chat histories");
@@ -431,47 +417,173 @@ router.get('/api/chat/histories/:chatId', validateSessionAndRole("Any"), async (
 
   try {
     const chatHistory = await db.fetchChatHistoryById(chatId);
-    if (!chatHistory) {
-      return res.status(404).json({ message: "Chat history not found" });
-    }
-    res.json(chatHistory);
+    chatHistory
+      ? res.json(chatHistory)
+      : res.status(404).json({ message: "Chat history not found" });
   } catch (error) {
     handleApiError(res, error, "fetching chat history by ID");
   }
 });
 
+router.get('/admin/chatbot/gemini', validateSessionAndRole("SuperAdmin"), async (req, res) => {
+  try {
+    if (googleAuthError) {
+      return res.status(500).render("templates/Error/500", {
+        error: "Google API client initialization failed",
+        details: googleAuthError.message
+      });
+    }
+
+    if (!serviceusage || !projectId) {
+      return res.status(500).render("templates/Error/500", {
+        error: "Google Service Usage client or Project ID not available"
+      });
+    }
+
+    const geminiApiKey = process.env.GEMINI_API_KEY_maaz_waheed;
+    if (!geminiApiKey) {
+      return res.status(500).render("templates/Error/500", {
+        error: "Gemini API Key not configured"
+      });
+    }
+
+    const geminiModels = [
+      'gemini-2.0-flash',
+      'gemini-2.0-flash-lite',
+      'gemini-1.5-flash',
+      'gemini-1.5-flash-8b',
+      'gemini-1.5-pro'
+    ];
+
+    const modelData = await Promise.all(geminiModels.map(async (model) => {
+      try {
+        const modelInfoUrl = `https://generativelanguage.googleapis.com/v1beta/models/${model}?key=${geminiApiKey}`;
+        const infoResponse = await fetch(modelInfoUrl);
+
+        if (!infoResponse.ok) {
+          return {
+            name: model,
+            available: false,
+            error: `Model info not available (${infoResponse.status})`
+          };
+        }
+
+        const infoData = await infoResponse.json();
+        return {
+          name: model,
+          available: true,
+          description: infoData.description || 'No description',
+          inputTokenLimit: infoData.inputTokenLimit || 'Unknown',
+          outputTokenLimit: infoData.outputTokenLimit || 'Unknown',
+          supportedMethods: infoData.supportedGenerationMethods || [],
+          lastTested: new Date().toISOString()
+        };
+      } catch (error) {
+        return {
+          name: model,
+          available: false,
+          error: error.message
+        };
+      }
+    }));
+
+    let quotaInfo = {};
+    try {
+      const quotas = await serviceusage.services.consumerQuotaMetrics.list({
+        parent: `projects/${projectId}/services/generativelanguage.googleapis.com`
+      });
+
+      quotaInfo = {
+        metrics: quotas.data?.metrics?.map(metric => ({
+          displayName: metric.displayName || metric.name || 'Unknown Metric',
+          name: metric.name,
+          limit: metric.consumerQuotaLimits?.[0]?.quotaBuckets?.[0]?.effectiveLimit || 'N/A',
+          usage: metric.consumerQuotaLimits?.[0]?.quotaBuckets?.[0]?.currentUsage || 0,
+          percentage: 'N/A' // Calculated in template
+        })) || [],
+        updatedAt: new Date().toISOString()
+      };
+    } catch (error) {
+      quotaInfo = {
+        error: true,
+        message: "Failed to fetch quota information",
+        details: error.message
+      };
+    }
+
+    res.render("mainPages/geminiDashboard", {
+      title: "Gemini API Dashboard",
+      models: modelData.filter(m => m.available),
+      unavailableModels: modelData.filter(m => !m.available),
+      quotaInfo,
+      lastUpdated: new Date().toISOString(),
+      apiKeyConfigured: !!geminiApiKey,
+      googleAuthError: googleAuthError?.message,
+      projectId,
+      helpers: {
+        json: (context) => JSON.stringify(context, null, 2),
+        join: (array, separator) => Array.isArray(array) ? array.join(separator) : 'None',
+        formatNumber: (num) => (typeof num === 'number' || !isNaN(Number(num)))
+          ? Number(num).toLocaleString()
+          : num?.toString() || '0',
+        findMetric: (metrics, name) => Array.isArray(metrics)
+          ? (metrics.find(m => m.name === name) || { name, usage: 'Not found', limit: 'N/A', percentage: 'N/A' })
+          : { name, usage: 'Metrics unavailable', limit: 'N/A', percentage: 'N/A' },
+        isError: (obj) => obj && obj.error,
+        formatDate: (isoString) => isoString ? new Date(isoString).toLocaleString() : 'N/A'
+      }
+    });
+  } catch (error) {
+    console.error("Error in Gemini dashboard:", error);
+    res.status(500).render("templates/Error/500", {
+      error: "Failed to retrieve Gemini API information",
+      details: error.message
+    });
+  }
+});
+
 router.post('/api/chat/delete-message/:chatId', validateSessionAndRole("Any"), async (req, res) => {
   const { chatId } = req.params;
   const { messageId } = req.body;
 
-  if (!chatId || !messageId) {
-    return res.status(400).json({
-      message: "Chat ID and Message ID are required"
-    });
+  console.log(`Request received to delete message. Chat ID: ${chatId}, Message ID: ${messageId}`);
+
+  if (!chatId) {
+    console.error("Chat ID is missing in the request");
+    return res.status(400).json({ message: "Chat ID is required" });
+  }
+  if (!messageId) {
+    console.error("Message ID is missing in the request");
+    return res.status(400).json({ message: "Message ID is required" });
   }
 
   try {
+    console.log(`Fetching chat history for Chat ID: ${chatId}`);
     const chatHistory = await db.fetchChatHistoryById(chatId);
     if (!chatHistory) {
+      console.error(`Chat history not found for Chat ID: ${chatId}`);
       return res.status(404).json({ message: "Chat history not found" });
     }
 
+    console.log(`Parsing conversation history for Chat ID: ${chatId}`);
     let conversationHistory = typeof chatHistory.conversation_history === 'string'
       ? JSON.parse(chatHistory.conversation_history)
       : chatHistory.conversation_history;
 
-    conversationHistory = conversationHistory.filter((_, index) =>
-      index.toString() !== messageId
-    );
+    console.log(`Original conversation history length: ${conversationHistory.length}`);
+    conversationHistory = conversationHistory.filter((msg, index) => index.toString() !== messageId);
+    console.log(`Updated conversation history length: ${conversationHistory.length}`);
 
+    console.log(`Saving updated conversation history for Chat ID: ${chatId}`);
     await pool.query(
-      'UPDATE ai_history_chatapi SET conversation_history = $1 WHERE id = $2',
+      'UPDATE Ai_history SET conversation_history = $1 WHERE id = $2',
       [JSON.stringify(conversationHistory), chatId]
     );
 
+    console.log(`Message with ID: ${messageId} successfully deleted from Chat ID: ${chatId}`);
     res.json({ success: true, message: "Message deleted" });
   } catch (error) {
-    console.error(`Error deleting message from chat ${chatId}:`, error);
+    console.error(`Error deleting message with ID: ${messageId} from Chat ID: ${chatId}`, error);
     handleApiError(res, error, "deleting message");
   }
 });
@@ -481,62 +593,58 @@ router.post('/api/bot-chat', checkMessageLimit, async (req, res) => {
   const { username } = req.session.user;
 
   try {
+    // Get user settings
     const userSettings = await db.fetchUserSettings(username);
     const temperature = Math.min(Math.max(parseFloat(userSettings.temperature || DEFAULT_TEMPERATURE), 0), 2);
-    const [provider, model] = userSettings.ai_model.includes('/')
-      ? userSettings.ai_model.split('/')
-      : ['gemini', userSettings.ai_model];
 
+    // Get conversation history
     let conversationHistory = [];
     if (chatId) {
       const fetchedHistory = await db.fetchChatHistoryById(chatId);
-      if (!fetchedHistory && chatId) {
-        return res.status(404).json({ message: "Chat history not found" });
-      }
       if (fetchedHistory?.conversation_history) {
         conversationHistory = typeof fetchedHistory.conversation_history === 'string'
           ? JSON.parse(fetchedHistory.conversation_history)
           : fetchedHistory.conversation_history;
+      } else if (chatId) {
+        return res.status(404).json({ message: "Chat history not found" });
       }
     } else {
+      // Add system message for new chats
       conversationHistory.push({
-        role: "user",
+        role: "user",  // Changed from "system" to "user"
         parts: [{
-          text: "IMPORTANT CONTEXT: You are an AI chatbot developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. You're a general purpose chatbot (not specifically about MBK Tech Studio). When asked about your identity, mention your developers and that you're a general AI assistant developed at MBK Tech Studio."
+          text: "IMPORTANT CONTEXT: You are an AI chatbot developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. You're a general purpose chatbot (not specifically about MBK Tech Studio). When asked about your identity, mention your developers and that you're a general AI assistant developed at MBK Tech Studio. Keep responses concise."
         }]
       });
     }
 
+    // Add new user message
     conversationHistory.push({ role: "user", parts: [{ text: message }] });
 
+    // Determine AI provider and model
+    const [provider, model] = userSettings.ai_model.includes('/')
+      ? userSettings.ai_model.split('/')
+      : ['gemini', userSettings.ai_model];
+
+    // Call appropriate AI service
     let aiResponseText;
     switch (provider.toLowerCase()) {
       case 'mallow':
         aiResponseText = await aiServices.mallow(message);
         break;
       case 'nvidia':
-        if (!process.env.NVIDIA_API) {
-          throw new Error("NVIDIA API key not configured");
-        }
-        aiResponseText = await aiServices.nvidia(
-          process.env.NVIDIA_API,
-          userSettings.ai_model,
-          conversationHistory
-        );
+        const nvidiaApiKey = process.env.NVIDIA_API;
+        if (!nvidiaApiKey) throw new Error("NVIDIA API key not configured");
+        aiResponseText = await aiServices.nvidia(nvidiaApiKey, userSettings.ai_model, conversationHistory, temperature);
         break;
       case 'gemini':
       default:
-        if (!process.env.GEMINI_API_KEY_maaz_waheed) {
-          throw new Error("Gemini API key not configured");
-        }
-        aiResponseText = await aiServices.gemini(
-          process.env.GEMINI_API_KEY_maaz_waheed,
-          model,
-          conversationHistory,
-          temperature
-        );
+        const geminiApiKey = process.env.GEMINI_API_KEY_maaz_waheed;
+        if (!geminiApiKey) throw new Error("Gemini API key not configured");
+        aiResponseText = await aiServices.gemini(geminiApiKey, model, conversationHistory, temperature);
     }
 
+    // Save conversation if not Mallow
     let newChatId = chatId;
     if (provider !== 'mallow') {
       conversationHistory.push({ role: "model", parts: [{ text: aiResponseText }] });
@@ -563,7 +671,7 @@ router.post('/api/chat/clear-history/:chatId', validateSessionAndRole("Any"), as
   if (!chatId) return res.status(400).json({ message: "Chat ID is required" });
 
   try {
-    await pool.query('DELETE FROM ai_history_chatapi WHERE id = $1', [chatId]);
+    await pool.query('DELETE FROM Ai_history WHERE id = $1', [chatId]);
     res.json({ status: 200, message: "Chat history deleted", chatId });
   } catch (error) {
     handleApiError(res, error, "deleting chat history");
@@ -581,11 +689,10 @@ router.get('/api/user-settings', validateSessionAndRole("Any"), async (req, res)
 
 router.post('/api/save-settings', validateSessionAndRole("Any"), async (req, res) => {
   try {
-    const success = await db.saveUserSettings(req.session.user.username, req.body);
-    res.json({
-      success,
-      message: success ? "Settings saved" : "Failed to save settings"
-    });
+    const isSaved = await db.saveUserSettings(req.session.user.username, req.body);
+    isSaved
+      ? res.json({ success: true, message: "Settings saved" })
+      : res.status(500).json({ success: false, message: "Failed to save settings" });
   } catch (error) {
     handleApiError(res, error, "saving settings");
   }
diff --git a/views/admin/dashboard.handlebars b/views/admin/dashboard.handlebars
index 8259917..af46edc 100644
--- a/views/admin/dashboard.handlebars
+++ b/views/admin/dashboard.handlebars
@@ -173,10 +173,6 @@
           <i class="fas fa-comments"></i>
           <span>Chat Management</span>
         </a>
-        <a href="/admin/settings" class="action-button">
-          <i class="fas fa-cog"></i>
-          <span>System Settings</span>
-        </a>
         <a href="/admin/users/export?format=csv" class="action-button">
           <i class="fas fa-file-export"></i>
           <span>Export Data</span>
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
new file mode 100644
index 0000000..1ff0752
--- /dev/null
+++ b/views/layouts/main.handlebars
@@ -0,0 +1,563 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="/Assets/Scripts/main.js"></script>
+    <link src="/Assets/Scripts/logout.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="icon" type="image/x-icon" href="/Assets/Images/dgicon.svg">
+    <style>
+        :root {
+            --primary: #55a6a2;
+            --primary-light: #eef2ff;
+            --secondary: #377a77;
+            --dark: #1e1e24;
+            --light: #f8f9fa;
+            --gray: #6c757d;
+            --danger: #ef233c;
+            --success: #4cc9f0;
+            --border-radius: 8px;
+            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f5f7fb;
+            color: var(--dark);
+            display: flex;
+            min-height: 100vh;
+            overflow-x: hidden;
+            /* Prevent horizontal scroll when sidebar pushes content */
+        }
+
+        /* Sidebar Styles */
+        .sidebar {
+            width: 220px;
+            background: white;
+            box-shadow: var(--shadow);
+            padding: 1.5rem 0;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s ease;
+            z-index: 100;
+        }
+
+        .sidebar-header {
+            padding: 0 1.5rem 1.5rem;
+            border-bottom: 1px solid #eee;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary);
+        }
+
+        .sidebar-menu {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1rem 0;
+        }
+
+        .menu-title {
+            padding: 0.5rem 1.5rem;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--gray);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+
+        .menu-item {
+            padding: 0.75rem 1.5rem;
+            display: flex;
+            align-items: center;
+            color: var(--gray);
+            text-decoration: none;
+            transition: all 0.2s ease;
+            border-left: 3px solid transparent;
+        }
+
+        .menu-item:hover,
+        .menu-item.active {
+            background-color: var(--primary-light);
+            color: var(--primary);
+            border-left-color: var(--primary);
+        }
+
+        .menu-item i {
+            margin-right: 0.75rem;
+            font-size: 1.1rem;
+        }
+
+        /* Main Content Styles */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            transition: margin-left 0.3s ease;
+            /* Added for smooth transition */
+        }
+
+        /* Top Navigation */
+        .top-nav {
+            background: white;
+            padding: 1rem 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-shadow: var(--shadow);
+            z-index: 90;
+        }
+
+        .sidebar-toggle-btn {
+            display: none;
+            /* Hidden by default, shown on mobile */
+            background: none;
+            border: none;
+            color: var(--dark);
+            font-size: 1.5rem;
+            cursor: pointer;
+            padding: 0.5rem;
+            margin-right: 1rem;
+            /* Space between button and search bar */
+        }
+
+        .search-bar-main {
+            position: relative;
+            width: 300px;
+        }
+
+        .search-bar-main input {
+            width: 100%;
+            padding: 0.5rem 1rem 0.5rem;
+            border: 1px solid #ddd;
+            border-radius: var(--border-radius);
+            outline: none;
+            transition: all 0.3s ease;
+        }
+
+        .search-bar-main input:focus {
+            border-color: var(--primary);
+        }
+
+        .search-bar-main i {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--gray);
+        }
+
+        .user-profile {
+            display: flex;
+            align-items: center;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .profile-img {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-right: 0.2rem;
+        }
+
+        .profile-name {
+            font-weight: 500;
+            margin-right: 0.5rem;
+        }
+
+        .profile-dropdown {
+            position: absolute;
+            top: 100%;
+            right: 0;
+            background: white;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            padding: 0.5rem 0;
+            min-width: 200px;
+            display: none;
+            z-index: 100;
+        }
+
+        .user-profile:hover .profile-dropdown {
+            display: block;
+        }
+
+        .dropdown-item {
+            padding: 0.75rem 1.5rem;
+            display: flex;
+            align-items: center;
+            color: var(--dark);
+            text-decoration: none;
+            transition: all 0.2s ease;
+        }
+
+        .dropdown-item:hover {
+            background-color: var(--primary-light);
+            color: var(--primary);
+        }
+
+        .dropdown-item i {
+            margin-right: 0.75rem;
+        }
+
+        /* Content Area */
+        .content-area {
+            flex: 1;
+            padding: 1rem;
+            overflow-y: auto;
+        }
+
+        .page-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 2rem;
+        }
+
+        .page-title {
+            font-size: 1.75rem;
+            font-weight: 600;
+        }
+
+        .breadcrumb {
+            display: flex;
+            align-items: center;
+            color: var(--gray);
+            font-size: 0.875rem;
+        }
+
+        .breadcrumb a {
+            color: var(--gray);
+            text-decoration: none;
+            transition: all 0.2s ease;
+        }
+
+        .breadcrumb a:hover {
+            color: var(--primary);
+        }
+
+        .breadcrumb .separator {
+            margin: 0 0.5rem;
+        }
+
+        /* Quick Links */
+        .quick-links {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1.5rem;
+            margin-bottom: 2rem;
+        }
+
+        .quick-link-card {
+            background: white;
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            box-shadow: var(--shadow);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            color: var(--dark);
+        }
+
+        .quick-link-card:hover {
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .quick-link-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-color: var(--primary-light);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 1rem;
+            color: var(--primary);
+            font-size: 1.5rem;
+        }
+
+        .quick-link-title {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+        }
+
+        .quick-link-desc {
+            font-size: 0.875rem;
+            color: var(--gray);
+        }
+
+        /* Responsive */
+        @media (max-width: 992px) {
+            .sidebar-toggle-btn {
+                display: block;
+                /* Show toggle button on mobile */
+            }
+
+            .sidebar {
+                position: fixed;
+                /* Take sidebar out of flow */
+                left: -220px;
+                /* Initially hidden off-screen */
+                height: 100vh;
+                /* transition: left 0.3s ease; is covered by 'all' */
+            }
+
+            .sidebar.active {
+                left: 0;
+                /* Slide in when active */
+            }
+
+            .main-content {
+                margin-left: 0 !important;
+                /* Ensure main content takes full width initially */
+            }
+
+            .sidebar.active+.main-content {
+                margin-left: 220px !important;
+                /* Push main content when sidebar is active */
+            }
+        }
+
+        @media (max-width: 768px) {
+            .quick-links {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+
+            .search-bar-main {
+                width: auto;
+                /* Allow search bar to shrink */
+                flex-grow: 1;
+                /* Allow search bar to take available space */
+                margin-right: 1rem;
+                /* Space before user profile */
+            }
+
+            .top-nav {
+                padding: 1rem;
+                /* Reduce padding on smaller screens */
+            }
+
+            .sidebar.active+.main-content {
+                margin-left: 0 !important;
+                /* On very small screens, sidebar overlays */
+                /* Or, if you want to push content even on small screens, remove this line.
+                    Consider reducing sidebar width on smaller screens if pushing. */
+            }
+
+            /* Optional: If sidebar overlays on very small screens, ensure it's above top-nav */
+            .sidebar.active {
+                z-index: 1001;
+                /* Higher z-index if it overlays top-nav */
+            }
+        }
+
+        @media (max-width: 576px) {
+            .profile-name {
+                display: none;
+                /* Hide profile name on very small screens */
+            }
+
+            .user-profile {
+                margin-left: auto;
+                /* Push profile to the right if search bar shrinks a lot */
+            }
+
+            .search-bar-main input {
+                padding-left: 2rem;
+                /* Adjust padding if icon size changes or for better fit */
+            }
+
+            .search-bar-main i {
+                left: 0.5rem;
+                /* Adjust icon position */
+            }
+        }
+
+        .search-dropdown {
+            position: absolute;
+            top: 110%;
+            left: 0;
+            width: 100%;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+            z-index: 200;
+            max-height: 350px;
+            overflow-y: auto;
+        }
+
+        .search-dropdown ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .search-dropdown li {
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .search-dropdown li:last-child {
+            border-bottom: none;
+        }
+
+        .search-dropdown li:hover {
+            background: var(--primary-light);
+        }
+
+        .search-dropdown .dropdown-section-title {
+            font-size: 0.85rem;
+            font-weight: bold;
+            color: var(--gray);
+            padding: 0.5rem 1rem 0.25rem;
+            background: #fafbfc;
+        }
+
+        .search-dropdown .show-more {
+            text-align: center;
+            padding: 0.75rem 1rem;
+            color: var(--primary);
+            cursor: pointer;
+            font-weight: 500;
+            border-top: 1px solid #f0f0f0;
+            background: #fafbfc;
+        }
+
+        .search-dropdown .show-more:hover {
+            background: var(--primary-light);
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Sidebar -->
+    <aside class="sidebar">
+        <div class="sidebar-header">
+            <div class="logo">Web Portal</div>
+            <!-- Optional: Add a close button for mobile here -->
+        </div>
+
+        <div class="sidebar-menu">
+            <!-- Common Menu Items -->
+            <div class="menu-title">Home</div>
+            <a href="/admin/dashboard" class="menu-item {{#if (eq page "Dashboard")}}active{{/if}}">
+                <i class="fas fa-home"></i>
+                <span>Dashboard</span>
+            </a>
+            <a href="/admin/users" class="menu-item {{#if (eq page "UserManagement")}}active{{/if}}">
+                <i class="fas fa-users"></i>
+                <span>User Management</span>
+            </a>
+            <a href="/admin/chats" class="menu-item {{ChatManagement}} {{#if (eq page "ChatManagement")}}active{{/if}}">
+                <i class="fas fa-comments"></i>
+                <span>Chat Management</span>
+            </a>
+        </div>
+    </aside>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <!-- Top Navigation -->
+        <nav class="top-nav">
+            <button class="sidebar-toggle-btn" aria-label="Toggle sidebar">
+                <i class="fas fa-bars"></i>
+            </button>
+
+            <div style="opacity: 0;" class="search-bar-main">
+                <i class="fas fa-search"></i>
+                <input id="dashboard-search" type="text" placeholder="Search..." readonly>
+                <div id="search-dropdown" class="search-dropdown" style="display:none;"></div>
+            </div>
+
+            <div class="user-profile" id="{{username}}" title="username: {{username}}">
+                <i class="fas fa-user"></i>
+                <span class="profile-name">{{user.name}}</span>
+                <i class="fas fa-chevron-down"></i>
+
+                <div class="profile-dropdown">
+                    <a href="/user/settings" class="dropdown-item">
+                        <i class="fas fa-cog"></i>
+                        <span>Settings</span>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a onclick="logout()" class="dropdown-item">
+                        <i class="fas fa-sign-out-alt"></i>
+                        <span>Logout</span>
+                    </a>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Content Area -->
+        <div class="content-area">
+            {{{body}}}
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const sidebar = document.querySelector('.sidebar');
+            const sidebarToggleBtn = document.querySelector('.sidebar-toggle-btn');
+            const mainContent = document.querySelector('.main-content'); // Get main content area
+
+            if (sidebarToggleBtn && sidebar) {
+                sidebarToggleBtn.addEventListener('click', function () {
+                    sidebar.classList.toggle('active');
+                    // The CSS handles pushing main content based on .sidebar.active
+                });
+            }
+
+            // Close sidebar when clicking outside of it on mobile (if it's an overlay)
+            // Or when a menu item is clicked
+            document.addEventListener('click', function (event) {
+                const isMobile = window.innerWidth <= 768; // Match the breakpoint where sidebar overlays
+
+                if (isMobile && sidebar.classList.contains('active')) {
+                    const isClickInsideSidebar = sidebar.contains(event.target);
+                    const isClickOnToggleButton = sidebarToggleBtn && sidebarToggleBtn.contains(event.target);
+
+                    if (!isClickInsideSidebar && !isClickOnToggleButton) {
+                        sidebar.classList.remove('active');
+                    }
+                }
+            });
+
+            // Close sidebar when a menu item is clicked on mobile
+            const menuItems = sidebar.querySelectorAll('.menu-item');
+            menuItems.forEach(item => {
+                item.addEventListener('click', function () {
+                    const isMobile = window.innerWidth <= 992; // General mobile breakpoint
+                    if (isMobile && sidebar.classList.contains('active')) {
+                        // Check if the sidebar is in overlay mode (e.g., on very small screens)
+                        // or if pushing content, this still helps close it after navigation.
+                        sidebar.classList.remove('active');
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/views/mainPages/chatbot.handlebars b/views/mainPages/chatbot.handlebars
index f96a5b5..e818fcc 100644
--- a/views/mainPages/chatbot.handlebars
+++ b/views/mainPages/chatbot.handlebars
@@ -15,6 +15,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="/Assets/Scripts/logout.js"></script>
     <style>
+        /* Root variables for consistent theming */
         :root {
             --base-font-size: 16px;
             --primary-color: #4caf50;
@@ -93,7 +94,6 @@
             font-size: var(--base-font-size);
             line-height: 1.5;
         }
-
         /* Button styles */
         .btn {
             padding: 0.5rem 1rem;
@@ -440,14 +440,6 @@
             position: relative;
         }
 
-        .response-time {
-            font-size: 0.8rem;
-            color: #888;
-            margin-top: 0.5rem;
-            text-align: right;
-            font-style: italic;
-        }
-
         .user-message .message-bubble {
             background: #323232d9;
             color: #ffffff;
@@ -850,6 +842,31 @@
             font-size: xx-large;
         }
 
+        /* Custom scrollbar for chat list */
+        .chat-list-container::-webkit-scrollbar {
+            width: 8px;
+            /* Width of the scrollbar */
+        }
+
+        .chat-list-container::-webkit-scrollbar-thumb {
+            background: var(--primary-color);
+            /* Scrollbar thumb color */
+            border-radius: 4px;
+            /* Rounded corners for the scrollbar thumb */
+        }
+
+        .chat-list-container::-webkit-scrollbar-thumb:hover {
+            background: var(--secondary-color);
+            /* Hover color for the scrollbar thumb */
+        }
+
+        .chat-list-container::-webkit-scrollbar-track {
+            background: var(--header-bg);
+            /* Background color of the scrollbar track */
+            border-radius: 4px;
+            /* Rounded corners for the scrollbar track */
+        }
+
         /* Improved Markdown rendering */
         .message-content {
             line-height: 1.6;
@@ -986,67 +1003,13 @@
             animation: fadeIn 0.3s ease;
         }
 
-        /* Add to your existing CSS */
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-
         .loading-spinner {
-            width: 20px;
-            height: 20px;
-            border: 3px solid var(--border-color);
+            width: 50px;
+            height: 50px;
+            border: 5px solid var(--border-color);
             border-top-color: var(--primary-color);
             border-radius: 50%;
             animation: spin 1s linear infinite;
-            margin: 0 auto;
-        }
-
-        .loading-more {
-            display: flex;
-            justify-content: center;
-            padding: 10px;
-            background: transparent !important;
-            border: none !important;
-            box-shadow: none !important;
-            height: auto !important;
-        }
-
-        /* Pagination controls */
-        .pagination-controls {
-            display: flex;
-            justify-content: center;
-            padding: 1rem;
-            gap: 0.5rem;
-        }
-
-        .pagination-button {
-            padding: 0.5rem 1rem;
-            background: var(--input-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 0.5rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .pagination-button:hover {
-            background: var(--primary-color);
-            color: white;
-        }
-
-        .pagination-button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .pagination-info {
-            padding: 0.5rem 1rem;
-            color: var(--text-color);
         }
 
         .chat-list-loading .chat-list-item {
@@ -1070,85 +1033,18 @@
         }
 
         .chat-list-section-header {
-            padding: 0.75rem 1rem;
+            padding: 0.75rem 0.5rem 0.25rem;
             font-size: 0.85rem;
             font-weight: 600;
-            color: var(--text-color);
+            color: var(--secondary-color);
             text-transform: uppercase;
             letter-spacing: 0.5px;
-            border-bottom: 2px solid var(--primary-color);
-            margin-bottom: 0.75rem;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 0.5rem;
             position: sticky;
             top: 0;
             background-color: var(--header-bg);
             z-index: 1;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            transition: all 0.3s ease;
-        }
-
-        .chat-list-section-header::before {
-            content: '';
-            display: inline-block;
-            width: 4px;
-            height: 16px;
-            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
-            border-radius: 2px;
-        }
-
-        .chat-list-section-header:hover {
-            color: var(--primary-color);
-        }
-
-        /* Custom scrollbar for chat list */
-        .chat-list {
-            scrollbar-width: thin;
-            scrollbar-color: var(--primary-color) var(--input-bg);
-        }
-
-        .chat-list::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .chat-list::-webkit-scrollbar-track {
-            background: var(--input-bg);
-            border-radius: 4px;
-        }
-
-        .chat-list::-webkit-scrollbar-thumb {
-            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
-            border-radius: 4px;
-            border: 2px solid var(--input-bg);
-        }
-
-        .chat-list::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
-        }
-
-        /* Custom scrollbar for chat messages */
-        .chat-messages {
-            scrollbar-width: thin;
-            scrollbar-color: var(--primary-color) var(--input-bg);
-        }
-
-        .chat-messages::-webkit-scrollbar {
-            width: 8px;
-        }
-
-        .chat-messages::-webkit-scrollbar-track {
-            background: var(--input-bg);
-            border-radius: 4px;
-        }
-
-        .chat-messages::-webkit-scrollbar-thumb {
-            background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
-            border-radius: 4px;
-            border: 2px solid var(--input-bg);
-        }
-
-        .chat-messages::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
         }
 
         .chat-list {
@@ -1190,7 +1086,6 @@
 
         .chat-list-item:hover button {
             opacity: 1;
-            border-color: #007bff;
         }
 
         .chat-list-item span {
@@ -1232,12 +1127,6 @@
             </div>
         </header>
         <section class="chat-content">
-            {{#if isChatIdOfOtherUser}}
-            <div
-                style="background-color: var(--input-bg); color: var(--text-color); padding: 0.25rem; border-radius: 0.5rem; box-shadow: var(--shadow); text-align: center;">
-                This Chat ID Belongs to <strong>{{chatIdUsername}}</strong>
-            </div>
-            {{/if}}
             <div class="chat-messages" id="chat-messages"></div>
             <div id="scroll-down-btn" class="scroll-down-btn">
                 <i class="fa fa-arrow-down"></i>
@@ -1327,37 +1216,25 @@
                     <div class="settings-group">
                         <label>Subscription Details</label>
                         <div class="account-info">
-                            {{#if (eq role "NormalUser")}}
-                            <p>Plan: <span id="userSubscriptionPlan">Basic (Free)</span></p>
+                            {{#if (eq role "SuperAdmin")}}
+                            <p>Plan: <span id="userSubscriptionPlan">MBK Tech Studio Team</span></p>
+                            <p>Messages Per Day: Unlimited</p>
+                            {{else}}
+                            <p>Plan: <span id="userSubscriptionPlan">Free</span></p>
                             <p>Messages Per Day: <span id="messagesUsed">{{settings.messageCount}}</span>/<span
                                     id="messagesPerDay">{{#if settings.dailyLimit}}{{settings.dailyLimit}}{{else}}
                                     Unlimited{{/if}}</span></p>
                             {{/if}}
-
-                            {{#if (eq role "Guest")}}
-                            <p>Plan: <span id="userSubscriptionPlan">Guest (Restricted)</span></p>
-                            {{/if}}
-
-                            {{#if (eq role "Admin")}}
-                            <p>Plan: <span id="userSubscriptionPlan">MBK Tech
-                                    Studio Team</span></p>
-                            <p>Messages Per Day: Unlimited</p>
-                            {{/if}}
-
-                            {{#if (eq role "SuperAdmin")}}
-                            <p>Plan: <span id="userSubscriptionPlan">Administration</span></p>
-                            <p>Messages Per Day: Unlimited</p>
-                            {{/if}}
                         </div>
                     </div>
-                    <a href="https://portal.mbktechstudio.com/user/settings/plan" target="_blank"
-                        class="btn btn-save"><i class="fa fa-arrow-up"></i> Upgrade Plan</a>
+                    <a href="https://portal.mbktechstudio.com/user/settings" target="_blank" class="btn btn-save"><i
+                            class="fa fa-arrow-up"></i> Upgrade Plan</a>
                     <a href="https://portal.mbktechstudio.com/user/settings" target="_blank" class="btn btn-cancel"><i
                             class="fa fa-gear"></i> Account Settings</a>
-                </div>
-                <div class="settings-footer">
                     <button id="logout-button" onclick="logout()" class="btn btn-danger"><i
                             class="fa fa-sign-out-alt"></i> Logout</button>
+                </div>
+                <div class="settings-footer">
                     <a id="save-settings" class="btn btn-save"><i class="fa fa-save" aria-hidden="true"></i> Save
                         Settings</a>
                     <a id="cancel-settings" class="btn btn-cancel">Cancel</a>
@@ -1395,16 +1272,11 @@
         const chatListOverlay = document.getElementById('chat-list-overlay');
         const scrollDownBtn = document.getElementById('scroll-down-btn');
 
-        let currentPage = 1;
-        let totalPages = 1;
-        let isLoadingMore = false;
-
-
         marked.setOptions({
-            breaks: true,
-            gfm: true,
-            smartypants: true,
-            tables: true,
+            breaks: true,       // Add <br> on single line breaks
+            gfm: true,          // Enable GitHub Flavored Markdown
+            smartypants: true,  // Smart quotes and other typographic enhancements
+            tables: true,       // Enable table support
             highlight: function (code, lang) {
                 if (lang && hljs.getLanguage(lang)) {
                     return hljs.highlight(lang, code).value;
@@ -1420,10 +1292,10 @@
         let currentSettings = {
             model: '{{settings.ai_model}}',
             theme: '{{settings.theme}}',
-            temperature: `{{ settings.temperature }}`,
-            fontSize: `{{ settings.font_size }}`,
-            messageCount: `{{ settings.messageCount }}`,
-            dailyLimit: `{{ settings.dailyLimit }}`
+            temperature: {{ settings.temperature }},
+        fontSize: {{ settings.font_size }},
+        messageCount: {{ settings.messageCount }},
+        dailyLimit: {{ settings.dailyLimit }}
         };
 
         // Scroll button visibility
@@ -1501,258 +1373,33 @@
             });
         }
 
-        function setupScrollListener() {
-            chatList.addEventListener('scroll', () => {
-                if (!isLoadingMore && currentPage < totalPages && isScrolledToBottom()) {
-                    fetchChatHistoryList(currentPage + 1);
-                }
-            });
-        }
-
-        function isScrolledToBottom() {
-            return chatList.scrollTop + chatList.clientHeight >= chatList.scrollHeight - 100;
-        }
-
-        function fetchChatHistoryList(page = 1, append = false) {
-            if (isLoadingMore) return;
-
-            isLoadingMore = true;
-
-            // Show loading indicator only if it's not an append operation
-            if (!append) {
-                chatList.classList.add('chat-list-loading');
-                chatList.innerHTML = '';
+        // Fetch chat history
+        function fetchChatHistoryList() {
+            // Show skeleton loading
+            chatList.classList.add('chat-list-loading');
+            chatList.innerHTML = '';
 
-                // Create 5 skeleton items
-                for (let i = 0; i < 5; i++) {
-                    const skeletonItem = document.createElement('li');
-                    skeletonItem.className = 'chat-list-item skeleton-loading';
-                    skeletonItem.innerHTML = '<span style="visibility: hidden;">Loading...</span>';
-                    chatList.appendChild(skeletonItem);
-                }
-            } else {
-                // For append operations, just show a small loading spinner at the bottom
-                const loadingItem = document.createElement('li');
-                loadingItem.className = 'chat-list-item loading-more';
-                loadingItem.innerHTML = '<div class="loading-spinner"></div>';
-                chatList.appendChild(loadingItem);
+            // Create 5 skeleton items
+            for (let i = 0; i < 5; i++) {
+                const skeletonItem = document.createElement('li');
+                skeletonItem.className = 'chat-list-item skeleton-loading';
+                skeletonItem.innerHTML = '<span style="visibility: hidden;">Loading...</span>';
+                chatList.appendChild(skeletonItem);
             }
 
-            fetch(`/api/chat/histories?page=${page}`)
+            fetch('/api/chat/histories')
                 .then(response => response.ok ? response.json() : Promise.reject('Failed to fetch chat histories'))
                 .then(histories => {
-                    // Remove loading indicators
-                    if (!append) {
-                        chatList.classList.remove('chat-list-loading');
-                    }
-                    const loadingItems = chatList.querySelectorAll('.loading-more, .skeleton-loading');
-                    loadingItems.forEach(item => item.remove());
-
-                    isLoadingMore = false;
-
-                    currentPage = histories.pagination.currentPage;
-                    totalPages = histories.pagination.totalPages;
-
-                    // If appending, we need to merge the new items with existing ones
-                    if (append) {
-                        // Merge the new items with existing grouped chats
-                        const existingChats = groupChatsFromDOM();
-                        const mergedChats = mergeChatGroups(existingChats, histories);
-                        renderChatList(mergedChats);
-                    } else {
-                        // First load, just render normally
-                        renderChatList(histories);
-                    }
+                    chatList.classList.remove('chat-list-loading');
+                    renderChatList(histories);
                 })
                 .catch(error => {
                     chatList.classList.remove('chat-list-loading');
-                    const loadingItems = chatList.querySelectorAll('.loading-more');
-                    loadingItems.forEach(item => item.remove());
-                    isLoadingMore = false;
-
                     console.error("Error fetching chat histories:", error);
                     showErrorToast("Failed to load chat history");
                 });
         }
 
-        // Helper function to get existing chats from DOM
-        function groupChatsFromDOM() {
-            const sections = Array.from(chatList.querySelectorAll('.chat-list-section-header'));
-            const groupedChats = {
-                today: [],
-                yesterday: [],
-                last7Days: [],
-                last30Days: [],
-                older: {}
-            };
-
-            sections.forEach(section => {
-                const sectionTitle = section.textContent.trim();
-                const nextElement = section.nextElementSibling;
-
-                if (nextElement && nextElement.classList.contains('chat-list-item')) {
-                    const items = [];
-                    let current = nextElement;
-
-                    while (current && current.classList.contains('chat-list-item')) {
-                        items.push({
-                            id: current.dataset.chatId,
-                            created_at: current.querySelector('span').textContent,
-                            rawDate: new Date(current.dataset.timestamp || 0)
-                        });
-                        current = current.nextElementSibling;
-                    }
-
-                    if (sectionTitle === 'Today') groupedChats.today = items;
-                    else if (sectionTitle === 'Yesterday') groupedChats.yesterday = items;
-                    else if (sectionTitle === 'Last 7 Days') groupedChats.last7Days = items;
-                    else if (sectionTitle === 'Last 30 Days') groupedChats.last30Days = items;
-                    else groupedChats.older[sectionTitle] = items;
-                }
-            });
-
-            return groupedChats;
-        }
-
-        // Helper function to merge chat groups
-        function mergeChatGroups(existing, newData) {
-            // Merge each time period
-            const merged = {
-                today: [...existing.today, ...newData.today],
-                yesterday: [...existing.yesterday, ...newData.yesterday],
-                last7Days: [...existing.last7Days, ...newData.last7Days],
-                last30Days: [...existing.last30Days, ...newData.last30Days],
-                older: { ...existing.older },
-                pagination: newData.pagination
-            };
-
-            // Merge older chats by month
-            for (const month in newData.older) {
-                if (merged.older[month]) {
-                    merged.older[month] = [...merged.older[month], ...newData.older[month]];
-                } else {
-                    merged.older[month] = newData.older[month];
-                }
-            }
-
-            return merged;
-        }
-
-        // Modify the scroll listener
-        function setupScrollListener() {
-            chatList.addEventListener('scroll', () => {
-                if (!isLoadingMore && currentPage < totalPages && isScrolledToBottom()) {
-                    fetchChatHistoryList(currentPage + 1, true); // Pass true to append
-                }
-            });
-        }
-
-        // Update renderChatList to preserve existing items
-        function renderChatList(groupedHistories) {
-            // Clear only if it's not an append operation
-            if (!isLoadingMore || currentPage === 1) {
-                chatList.innerHTML = '';
-            }
-
-            // Your existing render logic, but now it will append to existing items
-            const createSectionHeader = (title) => {
-                const header = document.createElement('div');
-                header.className = 'chat-list-section-header';
-                header.textContent = title;
-                return header;
-            };
-
-            const createChatItems = (chats) => {
-                if (!chats || chats.length === 0) return null;
-
-                const fragment = document.createDocumentFragment();
-                chats.forEach(history => {
-                    const listItem = document.createElement('li');
-                    listItem.className = 'chat-list-item';
-                    listItem.dataset.chatId = history.id;
-                    listItem.dataset.timestamp = history.rawDate?.getTime();
-                    listItem.innerHTML = `
-                        <span>${history.created_at}</span>
-                        <button title="Delete chat" onclick="event.stopPropagation(); deleteChat('${history.id}')">
-                            <i class="fa fa-trash"></i>
-                        </button>
-                    `;
-                    listItem.addEventListener('click', () => {
-                        window.location.href = `/chatbot/${history.id}`;
-                    });
-                    fragment.appendChild(listItem);
-                });
-                return fragment;
-            };
-
-            // Today section
-            if (groupedHistories.today && groupedHistories.today.length > 0) {
-                const existingSection = chatList.querySelector('.chat-list-section-header:contains("Today")');
-                if (!existingSection) {
-                    chatList.appendChild(createSectionHeader('Today'));
-                }
-                const items = createChatItems(groupedHistories.today);
-                if (items) chatList.appendChild(items);
-            }
-
-            // Yesterday section
-            if (groupedHistories.yesterday && groupedHistories.yesterday.length > 0) {
-                const existingSection = chatList.querySelector('.chat-list-section-header:contains("Yesterday")');
-                if (!existingSection) {
-                    chatList.appendChild(createSectionHeader('Yesterday'));
-                }
-                const items = createChatItems(groupedHistories.yesterday);
-                if (items) chatList.appendChild(items);
-            }
-
-            // Last 7 Days section
-            if (groupedHistories.last7Days && groupedHistories.last7Days.length > 0) {
-                const existingSection = chatList.querySelector('.chat-list-section-header:contains("Last 7 Days")');
-                if (!existingSection) {
-                    chatList.appendChild(createSectionHeader('Last 7 Days'));
-                }
-                const items = createChatItems(groupedHistories.last7Days);
-                if (items) chatList.appendChild(items);
-            }
-
-            // Last 30 Days section
-            if (groupedHistories.last30Days && groupedHistories.last30Days.length > 0) {
-                const existingSection = chatList.querySelector('.chat-list-section-header:contains("Last 30 Days")');
-                if (!existingSection) {
-                    chatList.appendChild(createSectionHeader('Last 30 Days'));
-                }
-                const items = createChatItems(groupedHistories.last30Days);
-                if (items) chatList.appendChild(items);
-            }
-
-            // Older (by month) section
-            if (groupedHistories.older && Object.keys(groupedHistories.older).length > 0) {
-                // Sort months in descending order
-                const sortedMonths = Object.keys(groupedHistories.older).sort((a, b) => {
-                    return new Date(b) - new Date(a);
-                });
-
-                sortedMonths.forEach(month => {
-                    const existingSection = chatList.querySelector(`.chat-list-section-header:contains("${month}")`);
-                    if (!existingSection) {
-                        chatList.appendChild(createSectionHeader(month));
-                    }
-                    const items = createChatItems(groupedHistories.older[month]);
-                    if (items) chatList.appendChild(items);
-                });
-            }
-
-            // Empty state
-            if (chatList.children.length === 0) {
-                const emptyItem = document.createElement('li');
-                emptyItem.textContent = 'No chat history yet';
-                emptyItem.style.padding = '10px';
-                emptyItem.style.color = 'var(--text-color)';
-                emptyItem.style.textAlign = 'center';
-                chatList.appendChild(emptyItem);
-            }
-        }
-
         // Render chat list
         function renderChatList(groupedHistories) {
             chatList.innerHTML = '';
@@ -1775,11 +1422,11 @@
                     listItem.className = 'chat-list-item';
                     listItem.dataset.chatId = history.id;
                     listItem.innerHTML = `
-                        <span>${history.created_at}</span>
-                        <button title="Delete chat" onclick="event.stopPropagation(); deleteChat('${history.id}')">
-                            <i class="fa fa-trash"></i>
-                        </button>
-                    `;
+          <span>${history.created_at}</span>
+          <button title="Delete chat" onclick="event.stopPropagation(); deleteChat('${history.id}')">
+            <i class="fa fa-trash"></i>
+          </button>
+        `;
                     listItem.addEventListener('click', () => {
                         window.location.href = `/chatbot/${history.id}`;
                     });
@@ -1835,7 +1482,6 @@
                 chatList.appendChild(emptyItem);
             }
         }
-
         function loadChat(chatId) {
             currentChatId = chatId;
 
@@ -1884,7 +1530,6 @@
                     addMessage(`Error loading chat: ${error.message}`, 'ai');
                 });
         }
-
         // Start new chat
         function startNewChat() {
             currentChatId = null;
@@ -1919,8 +1564,6 @@
             e.preventDefault();
             const messageText = chatInput.value.trim();
             if (!messageText || isWaitingForResponse) return;
-
-            const startTime = Date.now();
             addMessage(messageText, 'user');
             chatInput.value = '';
             isWaitingForResponse = true;
@@ -1935,8 +1578,7 @@
             })
                 .then(response => response.ok ? response.json() : response.json().then(err => Promise.reject(err.message || "Unknown error")))
                 .then(data => {
-                    const responseTime = Date.now() - startTime; // Calculate response time
-                    if (data.aiResponse) addMessage(data.aiResponse, 'ai', null, responseTime);
+                    if (data.aiResponse) addMessage(data.aiResponse, 'ai');
                     if (data.newChatId && !currentChatId) {
                         currentChatId = data.newChatId;
                         fetchChatHistoryList();
@@ -1984,43 +1626,24 @@
             }
         }
 
-        function addMessage(text, sender, messageId = Date.now(), responseTime = null) {
-            // Skip rendering the IMPORTANT CONTEXT message if it's the first message
-            if (chatMessages.children.length === 0) {
- 
-                const contextMessages = [
-                    "IMPORTANT CONTEXT: You are an AI chatbot developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. You're a general purpose chatbot (not specifically about MBK Tech Studio). When asked about your identity, mention your developers and that you're a general AI assistant developed at MBK Tech Studio.", 
-                    "IMPORTANT CONTEXT: You are an AI chatbot developed by Muhammad Bin Khalid and Maaz Waheed at MBK Tech Studio. You're a general purpose chatbot (not specifically about MBK Tech Studio). When asked about your identity, mention your developers and that you're a general AI assistant developed at MBK Tech Studio. Keep responses concise."
-                ];
-
-                if (contextMessages.some(ctx => text.trim() === ctx.trim())) {
-                    console.log("Skipping IMPORTANT CONTEXT message.");
-                    return;
-                }
-            }
-
+        function addMessage(text, sender, messageId = Date.now()) {
             const messageDiv = document.createElement('div');
             messageDiv.className = `message ${sender}-message message-loading`;
             messageDiv.dataset.messageId = messageId;
 
             const deleteButton = sender === 'ai' ?
                 `<button class="delete-message-btn" onclick="deleteMessage('${messageId}')" title="Delete message">
-                    <i class="fa fa-trash"></i>
-                </button>` : '';
+            <i class="fa fa-trash"></i>
+            </button>` : '';
 
             const processedText = sender === 'ai' ? marked.parse(text) : escapeHtml(text);
 
-            // Add response time display for AI messages
-            const responseTimeDisplay = sender === 'ai' && responseTime ?
-                `<div class="response-time">Response time: ${(responseTime / 1000).toFixed(2)}s</div>` : '';
-
             messageDiv.innerHTML = `
-        <div class="message-bubble">
+            <div class="message-bubble">
             ${deleteButton}
             <div class="message-content">${processedText}</div>
-                ${responseTimeDisplay}
             </div>
-    `;
+        `;
 
             chatMessages.appendChild(messageDiv);
 
@@ -2060,7 +1683,6 @@
                 .replace(/'/g, "&#039;")
                 .replace(/\n/g, "<br>");
         }
-
         function addLineNumbersToCodeBlocks() {
             document.querySelectorAll('pre code').forEach((block) => {
                 // Skip if line numbers already exist
@@ -2115,6 +1737,7 @@
             });
         }
 
+
         function makeLinksOpenInNewTab(container) {
             container.querySelectorAll('a').forEach(link => {
                 link.setAttribute('target', '_blank');
@@ -2281,8 +1904,7 @@
         // Initialize
         document.addEventListener('DOMContentLoaded', () => {
             setupEventListeners();
-            fetchChatHistoryList(1); // Start with page 1
-            setupScrollListener(); // Add this line
+            fetchChatHistoryList();
             setupResponsiveBehavior();
             if (currentChatId && currentChatId !== 'null') {
                 loadChat(currentChatId);
diff --git a/views/staticPage/index.handlebars b/views/staticPage/index.handlebars
index fe98565..f5da926 100644
--- a/views/staticPage/index.handlebars
+++ b/views/staticPage/index.handlebars
@@ -1002,24 +1002,84 @@
         </div>
     </section>
 
-    <section class="section" style="padding-top: 0;">
-        <div class="detail-card" style="background: var(--gradient); color: white; text-align: center;">
-            <h2 style="color: white; margin-bottom: 1.5rem;">Ready to Transform Your AI Experience?</h2>
-            <p style="margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto;">Join hundreds of
-                users who are already leveraging the power of our AI Chat Application for their personal and
-                professional needs.</p>
-            <div class="cta-buttons" style="justify-content: center;">
-                <a href="/login?username=demo&password=demo" class="btn btn-primary"
-                    style="background: white; color: var(--primary);">
-                    <i class="fas fa-play-circle"></i> Try Live Demo
-                </a>
-                <a href="/login" class="btn btn-outline" style="border-color: white; color: white;">
-                    <i class="fas fa-sign-in-alt"></i> Login
-                </a>
+    <section class="section" id="gallery">
+        <h2 class="section-title">Gallery</h2>
+        <div class="gallery-container">
+            <div class="gallery-grid">
+                <!-- Chatbot Images -->
+                <div class="gallery-item fade-in-up">
+                    <a href="/Assets/Images/chatbot.png">
+                        <img src="/Assets/Images/chatbot.png" alt="Chatbot Interface" class="gallery-image">
+                    </a>
+                    <div class="gallery-caption">Modern Chatbot Interface</div>
+                </div>
+                <div class="gallery-item fade-in-up delay-1">
+                    <a href="/Assets/Images/chatbot-m.png">
+                        <img src="/Assets/Images/chatbot-m.png" alt="Mobile Chatbot" class="gallery-image">
+                    </a>
+                    <div class="gallery-caption">Mobile Responsive Design</div>
+                </div>
+
+                <!-- Admin Dashboard Images -->
+                <div class="gallery-item fade-in-up delay-2">
+                    <a href="/Assets/Images/dashboard.png">
+                        <img src="/Assets/Images/dashboard.png" alt="Admin Dashboard" class="gallery-image">
+                    </a>
+                    <div class="gallery-caption">Admin Dashboard Overview</div>
+                </div>
             </div>
         </div>
     </section>
 
+    <style>
+        .gallery-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+
+        .gallery-item {
+            background: var(--dark-light);
+            border-radius: var(--radius-md);
+            overflow: hidden;
+            transition: var(--transition);
+            border: 1px solid var(--glass-border);
+        }
+
+        .gallery-item:hover {
+            transform: translateY(-5px);
+            box-shadow: var(--shadow-md);
+        }
+
+        .gallery-image {
+            width: 100%;
+            height: 250px;
+            object-fit: contain;
+            display: block;
+        }
+
+        .gallery-caption {
+            padding: 1.5rem;
+            text-align: center;
+            font-weight: 500;
+            color: var(--lighter);
+            background: var(--dark-light);
+        }
+
+        @media (max-width: 768px) {
+            .gallery-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+
     <section class="section" id="features">
         <h2 class="section-title">Key Features</h2>
         <div class="features-grid">