diff --git a/next_webapp/src/app/[locale]/statistics/page.tsx b/next_webapp/src/app/[locale]/statistics/page.tsx
index 0f32bda77..778b055be 100644
--- a/next_webapp/src/app/[locale]/statistics/page.tsx
+++ b/next_webapp/src/app/[locale]/statistics/page.tsx
@@ -1,18 +1,11 @@
 "use client";
-import React, { useState, useEffect } from "react";
+import React, {useEffect, useState} from "react";
 import Header from "../../../components/Header";
 import Footer from "../../../components/Footer";
-import { useTranslations } from "next-intl";
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { Bar } from "react-chartjs-2";
+import {useTranslations} from "next-intl";
+import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip,} from "chart.js";
+import {Bar} from "react-chartjs-2";
+import {CATEGORY, SEARCH_MODE, SearchParams} from "@/app/types";
 
 ChartJS.register(
   CategoryScale,
@@ -23,39 +16,75 @@ ChartJS.register(
   Legend
 );
 
-const Statistics = () => {
-  // Dummy Array
-  const caseStudies = [
-    { id: 1, tag: "Safety and Well-being", publishNumber: "4", popularity: "11%", trimester: "1" },
-    { id: 2, tag: "Environment and Sustainability", publishNumber: "5", popularity: "40%", trimester: "2" },
-    { id: 3, tag: "Business and activity", publishNumber: "8", popularity: "90%", trimester: "3" },
-    { id: 4, tag: "Safety and Well-being", publishNumber: "4", popularity: "11%", trimester: "2" },
-    { id: 5, tag: "Environment and Sustainability", publishNumber: "5", popularity: "90%", trimester: "3" },
-    { id: 6, tag: "Business and activity", publishNumber: "8", popularity: "70%", trimester: "1" },
-    { id: 7, tag: "Safety and Well-being", publishNumber: "4", popularity: "11%", trimester: "2" },
-    { id: 8, tag: "Environment and Sustainability", publishNumber: "5", popularity: "20%", trimester: "2" },
-    { id: 9, tag: "Business and activity", publishNumber: "8", popularity: "60%", trimester: "1" },
-  ];
+async function searchStatistics(searchParams: SearchParams) {
+  const response = await fetch("/api/statistics", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    }
+  });
 
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  return await response.json();
+}
+
+
+const Statistics = () => {
+  const [caseStudies, setCaseStudies] = useState([]);
   // State for storing the filtered results and all filters
   const [filteredStudies, setFilteredStudies] = useState(caseStudies);
+
+  useEffect(() => {
+    fetchStatistics()
+  }, [])
+
+  const fetchStatistics = async () => {
+    try {
+      const data = await searchStatistics({searchTerm: "",
+        searchMode: SEARCH_MODE.TITLE,
+        category: CATEGORY.EV});
+      setCaseStudies(data);
+      console.log('data received! ' + data.toString());
+    } catch (error) {
+      console.log('request called!');
+    } finally {
+      console.log('request called finally!');
+    }
+  };
+
   const [tagFilter, setTagFilter] = useState("");
   const [trimesterFilter, setTrimesterFilter] = useState("");
   const [pagefilter, setPageFilter] = useState("5");
   const [search, setSearchTerm] = useState("");
 
+  // Effect to handle filtering based on tag and trimester
+  useEffect(() => {
+    let filtered = caseStudies;
+    if (tagFilter) {
+      filtered = filtered.filter((study: {tag: string}) => study.tag === tagFilter);
+    }
+    if (trimesterFilter) {
+      filtered = filtered.filter((study: {trimester: string}) => study.trimester === trimesterFilter);
+    }
+    setFilteredStudies(filtered);
+  }, [tagFilter, trimesterFilter]);
+
   // Distinct tags for the dropdown
-  const tags = Array.from(new Set(caseStudies.map((study) => study.tag)));
-  const trimesters = Array.from(new Set(caseStudies.map((study) => study.trimester)));
+  const tags = Array.from(new Set(caseStudies.map((study: {tag: string}) => study.tag)));
+  // Distinct trimesters for the dropdown
+  const trimesters = Array.from(new Set(caseStudies.map((study: {trimester: string}) => study.trimester)));
 
   // Effect to handle filtering based on tag and trimester
   useEffect(() => {
     let filtered = caseStudies;
     if (tagFilter) {
-      filtered = filtered.filter((study) => study.tag === tagFilter);
+      filtered = filtered.filter((study: {tag: string}) => study.tag === tagFilter);
     }
     if (trimesterFilter) {
-      filtered = filtered.filter((study) => study.trimester === trimesterFilter);
+      filtered = filtered.filter((study: {trimester: string}) => study.trimester === trimesterFilter);
     }
     setFilteredStudies(filtered);
   }, [tagFilter, trimesterFilter]);
@@ -68,7 +97,7 @@ const Statistics = () => {
   const npage = Math.ceil(filteredStudies.length / recordsPage);
 
   // Sort caseStudies by popularity
-  const sortedStudiesByPopularity = [...caseStudies].sort((a, b) => {
+  const sortedStudiesByPopularity = [...caseStudies].sort((a: {popularity: string}, b: {popularity: string}) => {
     const popularityA = parseFloat(a.popularity.replace('%', ''));
     const popularityB = parseFloat(b.popularity.replace('%', ''));
     return popularityB - popularityA; // Descending order
@@ -76,9 +105,9 @@ const Statistics = () => {
 
 
   // Counting the values of trimester to plot on the graph
-  const tri1 = caseStudies.filter((item) => item.trimester === "1").length;
-  const tri2 = caseStudies.filter((item) => item.trimester === "2").length;
-  const tri3 = caseStudies.filter((item) => item.trimester === "3").length;
+  const tri1 = caseStudies.filter((item: {trimester: string}) => item.trimester === "1").length;
+  const tri2 = caseStudies.filter((item: {trimester: string}) => item.trimester === "2").length;
+  const tri3 = caseStudies.filter((item: {trimester: string}) => item.trimester === "3").length;
 
   // Store the required variables for plotting the graph
   const data1 = {
@@ -229,12 +258,12 @@ const Statistics = () => {
                   </thead>
                   <tbody>
                     {records
-                      .filter((item) => {
+                      .filter((item: {tag: string}) => {
                         return search.toLowerCase() === ""
                           ? item
                           : item.tag.toLowerCase().includes(search);
                       })
-                      .map((study, index) => (
+                      .map((study: {id: string, tag: string, publishNumber: string, popularity: string }, index) => (
                         <tr
                           key={study.id}
                           className={index % 2 === 0 ? "bg-gray-100" : "bg-white"}
diff --git a/next_webapp/src/app/api/statistics/route.ts b/next_webapp/src/app/api/statistics/route.ts
new file mode 100644
index 000000000..e7831077a
--- /dev/null
+++ b/next_webapp/src/app/api/statistics/route.ts
@@ -0,0 +1,44 @@
+import handleRequest from '../../../mongodb/CaseStudies';
+
+export async function GET(request: Request) {
+    try {
+        const reqCount = {
+            method: 'GET',
+            query: {}
+        };
+
+        const resStats = {
+            status({statusCode}: { statusCode: any }) {
+                this.statusCode = statusCode;
+                return this;
+            },
+            json({data}: { data: any }) {
+                this.data = data
+                console.log('Response for count request:', data);
+            },
+            end({message}: { message: any }) {
+                this.message = message
+                console.log('Response ended:', message);
+            },
+            statusCode: 400,
+            data: {},
+            message: ""
+        };
+
+        await handleRequest(reqCount, resStats);
+        const statusCode = resStats.statusCode | 200;
+        const data =  resStats.data ;
+
+        // Returning the response data
+        return new Response(JSON.stringify(data), {
+            status: statusCode,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    } catch (error) {
+        console.error('Error handling request:', error);
+        return new Response(JSON.stringify({ message: 'Failed to fetch statistics' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' },
+        });
+    }
+}
\ No newline at end of file
diff --git a/next_webapp/src/mongodb/CaseStudies.js b/next_webapp/src/mongodb/CaseStudies.js
new file mode 100644
index 000000000..c3435f199
--- /dev/null
+++ b/next_webapp/src/mongodb/CaseStudies.js
@@ -0,0 +1,36 @@
+const dbConnect = require('../../lib/mongodb');
+const CaseStudy = require('./CaseStudy');
+
+async function handleRequest(req, res) {
+    await dbConnect();
+
+    const { method } = req;
+
+    switch (method) {
+        case 'GET':
+            console.log('Called all studies');
+            try {
+                // Retrieve all case studies without the _id field
+                const caseStudies = await CaseStudy.find({})
+                    .select('-_id'); // Exclude the _id field
+
+                res.status(200).json({ success: true, data: caseStudies });
+            } catch (error) {
+                res.status(400).json({ success: false, error: error.message });
+            }
+            break;
+        case 'POST':
+            try {
+                const useCase = await CaseStudy.create(req.body);
+                res.status(201).json({ success: true, data: useCase });
+            } catch (error) {
+                res.status(400).json({ success: false, error: error.message });
+            }
+            break;
+        default:
+            res.setHeader('Allow', ['GET', 'POST']);
+            res.status(405).end(`Method ${method} Not Allowed`);
+    }
+}
+
+module.exports = handleRequest;
\ No newline at end of file
diff --git a/next_webapp/src/mongodb/CaseStudy.js b/next_webapp/src/mongodb/CaseStudy.js
new file mode 100644
index 000000000..f01d1f598
--- /dev/null
+++ b/next_webapp/src/mongodb/CaseStudy.js
@@ -0,0 +1,27 @@
+const mongoose = require('mongoose');
+
+// Define the schema for the CaseStudy collection
+const CaseStudySchema = new mongoose.Schema({
+    tag: {
+        type: String,
+        required: [true, 'Please provide a tag for this use case.'],
+        maxlength: [30, 'Tag cannot be more than 30 characters']
+    },
+    publishNumber: {
+        type: String,
+        required: [true, 'Please provide a publish number for this use case.']
+    },
+    popularity: {
+        type: String,
+        required: [true, 'Please provide a popularity percentage for this use case.'],
+        match: [/^\d{1,3}%$/, 'Popularity must be a percentage in the format XX%']
+    },
+    trimester: {
+        type: String,
+        required: [true, 'Please provide a trimester for this use case.'],
+        match: [/^[1-3]$/, 'Trimester must be one of "1", "2", or "3"']
+    }
+});
+
+// Export the model, using 'CaseStudy' if it doesn't already exist
+module.exports = mongoose.models.CaseStudy || mongoose.model('CaseStudy', CaseStudySchema);
\ No newline at end of file
diff --git a/next_webapp/src/mongodb/UseCase.js b/next_webapp/src/mongodb/UseCase.js
deleted file mode 100644
index 3a1cf564a..000000000
--- a/next_webapp/src/mongodb/UseCase.js
+++ /dev/null
@@ -1,23 +0,0 @@
-// models/UseCase.js
-const mongoose = require('mongoose');
-
-const UseCaseSchema = new mongoose.Schema({
-    tag: {
-        type: String,
-        required: [true, 'Please provide a tag for this use case.'],
-        maxlength: [30, 'Tag cannot be more than 30 characters'],
-    },
-    popularity: {
-        type: Number,
-        required: true,
-        min: [0, 'Popularity must be a non-negative number'],
-        max: [100, 'Popularity cannot be more than 100'],
-    },
-    semester: {
-        type: String,
-        required: [true, 'Please provide a semester for this use case.'],
-        match: [/^\d{4}-T[1-3]$/, 'Semester must be in the format YYYY-T1, YYYY-T2, or YYYY-T3']
-    },
-});
-
-module.exports = mongoose.models.UseCase || mongoose.model('UseCase', UseCaseSchema);
\ No newline at end of file
diff --git a/next_webapp/src/mongodb/UseCases.js b/next_webapp/src/mongodb/UseCases.js
deleted file mode 100644
index b8db24e1c..000000000
--- a/next_webapp/src/mongodb/UseCases.js
+++ /dev/null
@@ -1,64 +0,0 @@
-const dbConnect = require('../../lib/mongodb');
-const UseCase = require('./UseCase');
-
-async function handleRequest(req, res) {
-    await dbConnect();
-
-    const { method } = req;
-
-    switch (method) {
-        case 'GET':
-            if (req.query.stats === 'true') {
-                console.log('Called Stats method');
-                // Handle statistics request
-                try {
-                    const stats = await UseCase.aggregate([
-                        {
-                            $group: {
-                                _id: {
-                                    tag: "$tag",
-                                    semester: "$semester"
-                                },
-                                averagePopularity: { $avg: "$popularity" },
-                                count: { $sum: 1 }
-                            }
-                        },
-                        {
-                            $project: {
-                                _id: 0,
-                                tag: "$_id.tag",
-                                semester: "$_id.semester",
-                                averagePopularity: { $round: ["$averagePopularity", 2] }, // Optional: round to 2 decimal places
-                                count: 1
-                            }
-                        }
-                    ]);
-                    res.status(200).json({ success: true, data: stats });
-                } catch (error) {
-                    res.status(400).json({ success: false, error: error.message });
-                }
-            } else {
-                // Handle normal GET request
-                try {
-                    const useCases = await UseCase.find({});
-                    res.status(200).json({ success: true, data: useCases });
-                } catch (error) {
-                    res.status(400).json({ success: false, error: error.message });
-                }
-            }
-            break;
-        case 'POST':
-            try {
-                const useCase = await UseCase.create(req.body);
-                res.status(201).json({ success: true, data: useCase });
-            } catch (error) {
-                res.status(400).json({ success: false, error: error.message });
-            }
-            break;
-        default:
-            res.setHeader('Allow', ['GET', 'POST']);
-            res.status(405).end(`Method ${method} Not Allowed`);
-    }
-}
-
-module.exports = handleRequest;
\ No newline at end of file
diff --git a/next_webapp/src/mongodb/test-stats.js b/next_webapp/src/mongodb/test-stats.js
index d1d425eaa..ecf2949fb 100644
--- a/next_webapp/src/mongodb/test-stats.js
+++ b/next_webapp/src/mongodb/test-stats.js
@@ -1,36 +1,42 @@
 const dbConnect = require('../../lib/mongodb');
-const handleRequest = require('./UseCases');
-const UseCase = require('./UseCase');
+const handleRequest = require('./CaseStudies');
+const CaseStudy = require('./CaseStudy');
+
 async function main() {
     await dbConnect();
 
     console.log('Inserting dummy data...');
-    await UseCase.deleteMany({}); // Clear existing data
-
-    const dummyData = [
-        { tag: 'Frontend', semester: '2024-T1', popularity: 75 },
-        { tag: 'Backend', semester: '2024-T2', popularity: 60 },
-        { tag: 'Frontend', semester: '2024-T3', popularity: 80 },
-        { tag: 'Frontend', semester: '2024-T1', popularity: 55 },
-        { tag: 'Backend', semester: '2024-T3', popularity: 70 }
+    await CaseStudy.deleteMany({}); // Clear existing data
+
+    // Dummy data provided
+    const CaseStudies = [
+        { tag: "Safety and Well-being", publishNumber: "4", popularity: "11%", trimester: "1" },
+        { tag: "Environment and Sustainability", publishNumber: "5", popularity: "40%", trimester: "2" },
+        { tag: "Business and activity", publishNumber: "8", popularity: "90%", trimester: "3" },
+        { tag: "Safety and Well-being", publishNumber: "4", popularity: "11%", trimester: "2" },
+        { tag: "Environment and Sustainability", publishNumber: "5", popularity: "90%", trimester: "3" },
+        { tag: "Business and activity", publishNumber: "8", popularity: "70%", trimester: "1" },
+        { tag: "Safety and Well-being", publishNumber: "4", popularity: "11%", trimester: "2" },
+        { tag: "Environment and Sustainability", publishNumber: "5", popularity: "20%", trimester: "2" },
+        { tag: "Business and activity", publishNumber: "8", popularity: "60%", trimester: "1" },
     ];
 
-    await UseCase.insertMany(dummyData);
+    await CaseStudy.insertMany(CaseStudies);
     console.log('Dummy data inserted.');
 
-    // Mock req and res objects
-    const req = {
+    //Fetch all use cases
+    const reqCount = {
         method: 'GET',
-        query: { stats: 'true' }
+        query: {}
     };
 
-    const res = {
+    const resCount = {
         status: (statusCode) => {
-            res.statusCode = statusCode;
-            return res;
+            resCount.statusCode = statusCode;
+            return resCount;
         },
         json: (data) => {
-            console.log('Response:', data);
+            console.log('Response for count request:', data);
         },
         end: (message) => {
             console.log('Response ended:', message);
@@ -39,12 +45,13 @@ async function main() {
     };
 
     try {
-        console.log('Fetching use case statistics...');
-        await handleRequest(req, res);
-        console.log('Operation completed.');
+        console.log('Fetching use case count by trimester...');
+        await handleRequest(reqCount, resCount);
     } catch (error) {
-        console.error('Error executing request:', error.message);
+        console.error('Error executing count request:', error.message);
     }
+
+    console.log('Operation completed.');
 }
 
 // Execute the main function if this module is run directly