diff --git a/src/components/QuickStartFilter.js b/src/components/QuickStartFilter.js
index 8e86dfe54..51fcb9e5c 100644
--- a/src/components/QuickStartFilter.js
+++ b/src/components/QuickStartFilter.js
@@ -2,20 +2,65 @@ import React, {useState} from "react";
 import quickstarts from "./QuickStartList";
 import Link from "@docusaurus/Link";
 import {FaGolang} from "react-icons/fa6";
-import {FaJava, FaLaptopCode, FaDocker, FaPython, FaCheck, FaArrowRight, FaArrowLeft} from "react-icons/fa";
+import {
+  FaJava,
+  FaLaptopCode,
+  FaDocker,
+  FaPython,
+  FaCheck,
+  FaArrowRight,
+  FaArrowLeft,
+  FaGem,
+} from "react-icons/fa";
 import {TbBrandCSharp} from "react-icons/tb";
 import {IoLogoJavascript} from "react-icons/io5";
 import {useColorMode} from "@docusaurus/theme-common";
+import {useLocation} from "@docusaurus/router";
+
+function isVersionAtLeast(version, minimumVersion) {
+  const versionParts = version.split(".").map(Number);
+  const minimumParts = minimumVersion.split(".").map(Number);
+
+  if (
+    versionParts.length !== 3 ||
+    minimumParts.length !== 3 ||
+    versionParts.some(Number.isNaN) ||
+    minimumParts.some(Number.isNaN)
+  ) {
+    return false;
+  }
+
+  for (let index = 0; index < 3; index++) {
+    if (versionParts[index] > minimumParts[index]) {
+      return true;
+    }
+
+    if (versionParts[index] < minimumParts[index]) {
+      return false;
+    }
+  }
+
+  return true;
+}
 
 export default function QuickstartFilter({defaultLanguage = null}) {
   const {colorMode} = useColorMode();
+  const {pathname} = useLocation();
   const isDark = colorMode === "dark";
 
+  const versionMatch = pathname.match(/\/docs\/(\d+\.\d+\.\d+)\//);
+  const supportsRubyQuickstarts =
+    !versionMatch || isVersionAtLeast(versionMatch[1], "4.0.0");
+
   const [currentStep, setCurrentStep] = useState(defaultLanguage ? 2 : 1);
   const [language, setLanguage] = useState(defaultLanguage);
   const [server, setServer] = useState(null);
 
   const filteredQuickstarts = quickstarts.filter((app) => {
+    if (app.language === "Ruby" && !supportsRubyQuickstarts) {
+      return false;
+    }
+
     return (
       (!language || app.language === language) &&
       (!server || app.server === server)
@@ -30,14 +75,39 @@ export default function QuickstartFilter({defaultLanguage = null}) {
     {name: "C#", icon: <TbBrandCSharp size={24} />, color: "#512BD4"},
   ];
 
+  if (supportsRubyQuickstarts) {
+    languages.push({name: "Ruby", icon: <FaGem size={24} />, color: "#CC342D"});
+  }
+
   const servers = [
-    {name: "Local", icon: <FaLaptopCode size={24} />, description: "Run directly on your machine"},
-    {name: "Docker", icon: <FaDocker size={24} />, description: "Run in a Docker container"},
+    {
+      name: "Local",
+      icon: <FaLaptopCode size={24} />,
+      description: "Run directly on your machine",
+    },
+    {
+      name: "Docker",
+      icon: <FaDocker size={24} />,
+      description: "Run in a Docker container",
+    },
   ];
 
   const steps = [
-    {id: 1, label: "Language", icon: languages.find(l => l.name === language)?.icon || null},
-    {id: 2, label: "Environment", icon: server === "Docker" ? <FaDocker size={16} /> : server === "Local" ? <FaLaptopCode size={16} /> : null},
+    {
+      id: 1,
+      label: "Language",
+      icon: languages.find((l) => l.name === language)?.icon || null,
+    },
+    {
+      id: 2,
+      label: "Environment",
+      icon:
+        server === "Docker" ? (
+          <FaDocker size={16} />
+        ) : server === "Local" ? (
+          <FaLaptopCode size={16} />
+        ) : null,
+    },
     {id: 3, label: "Quickstart", icon: null},
   ];
 
@@ -67,7 +137,7 @@ export default function QuickstartFilter({defaultLanguage = null}) {
   };
 
   return (
-    <div className={`quickstart-wizard ${isDark ? 'dark' : 'light'}`}>
+    <div className={`quickstart-wizard ${isDark ? "dark" : "light"}`}>
       <style>{`
         .quickstart-wizard {
           margin-top: 1.5rem;
@@ -366,20 +436,32 @@ export default function QuickstartFilter({defaultLanguage = null}) {
       <div className="wizard-stepper">
         {steps.map((step, idx) => (
           <React.Fragment key={step.id}>
-            <div className={`wizard-step ${currentStep === step.id ? 'active' : ''} ${currentStep > step.id ? 'completed' : ''}`}>
+            <div
+              className={`wizard-step ${
+                currentStep === step.id ? "active" : ""
+              } ${currentStep > step.id ? "completed" : ""}`}
+            >
               <div className="wizard-step-icon">
                 {currentStep > step.id ? <FaCheck size={12} /> : step.id}
               </div>
               <span>{step.label}</span>
               {currentStep > step.id && step.id === 1 && language && (
-                <span style={{color: '#ff914d', marginLeft: '0.25rem'}}>({language})</span>
+                <span style={{color: "#ff914d", marginLeft: "0.25rem"}}>
+                  ({language})
+                </span>
               )}
               {currentStep > step.id && step.id === 2 && server && (
-                <span style={{color: '#ff914d', marginLeft: '0.25rem'}}>({server})</span>
+                <span style={{color: "#ff914d", marginLeft: "0.25rem"}}>
+                  ({server})
+                </span>
               )}
             </div>
             {idx < steps.length - 1 && (
-              <div className={`wizard-step-connector ${currentStep > step.id ? 'completed' : ''}`} />
+              <div
+                className={`wizard-step-connector ${
+                  currentStep > step.id ? "completed" : ""
+                }`}
+              />
             )}
           </React.Fragment>
         ))}
@@ -391,18 +473,27 @@ export default function QuickstartFilter({defaultLanguage = null}) {
         {currentStep === 1 && (
           <>
             <h3 className="wizard-title">Select your language</h3>
-            <p className="wizard-subtitle">Choose the programming language for your application</p>
+            <p className="wizard-subtitle">
+              Choose the programming language for your application
+            </p>
             <div className="wizard-options">
               {languages.map((lang) => (
                 <button
                   key={lang.name}
-                  className={`wizard-option ${language === lang.name ? 'selected' : ''}`}
+                  className={`wizard-option ${
+                    language === lang.name ? "selected" : ""
+                  }`}
                   onClick={() => handleLanguageSelect(lang.name)}
                 >
                   <div className="wizard-option-radio">
-                    {language === lang.name && <FaCheck size={10} color="#fff" />}
+                    {language === lang.name && (
+                      <FaCheck size={10} color="#fff" />
+                    )}
                   </div>
-                  <div className="wizard-option-icon" style={{color: lang.color}}>
+                  <div
+                    className="wizard-option-icon"
+                    style={{color: lang.color}}
+                  >
                     {lang.icon}
                   </div>
                   <span className="wizard-option-label">{lang.name}</span>
@@ -416,30 +507,58 @@ export default function QuickstartFilter({defaultLanguage = null}) {
         {currentStep === 2 && (
           <>
             <h3 className="wizard-title">Select your environment</h3>
-            <p className="wizard-subtitle">Choose where you want to run the application server</p>
-            <div className="wizard-options" style={{gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))'}}>
+            <p className="wizard-subtitle">
+              Choose where you want to run the application server
+            </p>
+            <div
+              className="wizard-options"
+              style={{
+                gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
+              }}
+            >
               {servers.map((srv) => (
                 <button
                   key={srv.name}
-                  className={`wizard-option ${server === srv.name ? 'selected' : ''}`}
+                  className={`wizard-option ${
+                    server === srv.name ? "selected" : ""
+                  }`}
                   onClick={() => handleServerSelect(srv.name)}
-                  style={{flexDirection: 'column', alignItems: 'flex-start', gap: '0.5rem'}}
+                  style={{
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    gap: "0.5rem",
+                  }}
                 >
-                  <div style={{display: 'flex', alignItems: 'center', gap: '0.75rem', width: '100%'}}>
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.75rem",
+                      width: "100%",
+                    }}
+                  >
                     <div className="wizard-option-radio">
-                      {server === srv.name && <FaCheck size={10} color="#fff" />}
-                    </div>
-                    <div className="wizard-option-icon">
-                      {srv.icon}
+                      {server === srv.name && (
+                        <FaCheck size={10} color="#fff" />
+                      )}
                     </div>
+                    <div className="wizard-option-icon">{srv.icon}</div>
                     <span className="wizard-option-label">{srv.name}</span>
                   </div>
-                  <p className="wizard-option-desc" style={{marginLeft: '3.5rem'}}>{srv.description}</p>
+                  <p
+                    className="wizard-option-desc"
+                    style={{marginLeft: "3.5rem"}}
+                  >
+                    {srv.description}
+                  </p>
                 </button>
               ))}
             </div>
             <div className="wizard-actions">
-              <button className="wizard-btn wizard-btn-secondary" onClick={goBack}>
+              <button
+                className="wizard-btn wizard-btn-secondary"
+                onClick={goBack}
+              >
                 <FaArrowLeft size={12} /> Back
               </button>
             </div>
@@ -451,11 +570,15 @@ export default function QuickstartFilter({defaultLanguage = null}) {
           <>
             <div className="wizard-selection-summary">
               <span className="wizard-selection-tag">
-                {languages.find(l => l.name === language)?.icon}
+                {languages.find((l) => l.name === language)?.icon}
                 {language}
               </span>
               <span className="wizard-selection-tag">
-                {server === "Docker" ? <FaDocker size={14} /> : <FaLaptopCode size={14} />}
+                {server === "Docker" ? (
+                  <FaDocker size={14} />
+                ) : (
+                  <FaLaptopCode size={14} />
+                )}
                 {server}
               </span>
               <button className="wizard-reset-btn" onClick={resetSelection}>
@@ -465,8 +588,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
             <h3 className="wizard-title">✨ Recommended Quickstarts</h3>
             <p className="wizard-subtitle">
               {filteredQuickstarts.length > 0
-                ? `Found ${filteredQuickstarts.length} quickstart${filteredQuickstarts.length > 1 ? 's' : ''} for ${language} with ${server}`
-                : 'No quickstarts available for this selection'}
+                ? `Found ${filteredQuickstarts.length} quickstart${
+                    filteredQuickstarts.length > 1 ? "s" : ""
+                  } for ${language} with ${server}`
+                : "No quickstarts available for this selection"}
             </p>
             <div className="wizard-results">
               {filteredQuickstarts.map((app, idx) => (
@@ -480,7 +605,10 @@ export default function QuickstartFilter({defaultLanguage = null}) {
               ))}
             </div>
             <div className="wizard-actions">
-              <button className="wizard-btn wizard-btn-secondary" onClick={goBack}>
+              <button
+                className="wizard-btn wizard-btn-secondary"
+                onClick={goBack}
+              >
                 <FaArrowLeft size={12} /> Back
               </button>
             </div>
diff --git a/src/components/QuickStartList.js b/src/components/QuickStartList.js
index 17f9e6e03..8562546e7 100644
--- a/src/components/QuickStartList.js
+++ b/src/components/QuickStartList.js
@@ -306,6 +306,26 @@ const quickstarts = [
     link: "/docs/quickstart/flask-redis/",
   },
 
+  // Ruby list
+
+  {
+    title: "Ruby + Postgres",
+    language: "Ruby",
+    server: "Docker",
+    description:
+      "A sample Books CRUD API to demonstrate how seamlessly Keploy integrates with Ruby (Sinatra) and PostgreSQL.",
+    link: "/docs/quickstart/samples-ruby/#using-docker-compose-",
+  },
+
+  {
+    title: "Ruby + Postgres",
+    language: "Ruby",
+    server: "Local",
+    description:
+      "A sample Books CRUD API to demonstrate how seamlessly Keploy integrates with Ruby (Sinatra) and PostgreSQL.",
+    link: "/docs/quickstart/samples-ruby/#running-app-locally-on-linuxwsl-",
+  },
+
   //Javascript list
 
   /*  {
diff --git a/static/img/ruby_keploy.png b/static/img/ruby_keploy.png
new file mode 100644
index 000000000..4f8364b32
Binary files /dev/null and b/static/img/ruby_keploy.png differ
diff --git a/static/img/ruby_postgres_docker_setup.png b/static/img/ruby_postgres_docker_setup.png
new file mode 100644
index 000000000..e5d825ebf
Binary files /dev/null and b/static/img/ruby_postgres_docker_setup.png differ
diff --git a/static/img/ruby_quickstart_docker_compose.png b/static/img/ruby_quickstart_docker_compose.png
new file mode 100644
index 000000000..cb1f2be53
Binary files /dev/null and b/static/img/ruby_quickstart_docker_compose.png differ
diff --git a/static/img/ruby_testcase.png b/static/img/ruby_testcase.png
new file mode 100644
index 000000000..e44c06d19
Binary files /dev/null and b/static/img/ruby_testcase.png differ
diff --git a/versioned_docs/version-4.0.0/quickstart/ruby-sinatra-postgres.md b/versioned_docs/version-4.0.0/quickstart/ruby-sinatra-postgres.md
new file mode 100644
index 000000000..fad86e37e
--- /dev/null
+++ b/versioned_docs/version-4.0.0/quickstart/ruby-sinatra-postgres.md
@@ -0,0 +1,295 @@
+---
+id: samples-ruby
+title: Sample Books API
+sidebar_label: Ruby + Postgres
+description: The following sample app showcases how to use the Ruby (Sinatra) framework and the Keploy Platform.
+tags:
+  - ruby
+  - quickstart
+  - samples
+  - examples
+  - tutorial
+  - sinatra
+  - postgresql
+  - ruby-framework
+keywords:
+  - Sinatra Framework
+  - PostgreSQL
+  - Ruby
+  - API Test generator
+  - Auto case generation
+---
+
+import InstallReminder from '@site/src/components/InstallReminder';
+import SectionDivider from '@site/src/components/SectionDivider';
+
+## Introduction
+
+🪄 Dive into the world of Books CRUD API and see how seamlessly Keploy integrates with [Ruby (Sinatra)](https://sinatrarb.com/) and [PostgreSQL](https://www.postgresql.org/). Buckle up, it's gonna be a fun ride! 🎢
+
+<InstallReminder />
+
+## Prerequisites
+
+### For Local Setup:
+
+- Ruby 3.2 or higher
+- PostgreSQL 15 or higher
+- Bundler (`gem install bundler`)
+
+### For Docker Setup:
+
+- Docker (20.10 or higher)
+- Docker Compose (v2.0 or higher)
+
+<SectionDivider />
+
+## Using Docker Compose 🐳
+
+We will be using Docker Compose to run the application as well as PostgreSQL in Docker containers.
+
+### Clone the Application 🧪
+
+```bash
+git clone https://github.com/Nsanjayboruds/keploy-ruby-postgresql-quickstart.git && cd keploy-ruby-postgresql-quickstart
+```
+
+![Ruby Docker setup](/img/ruby_postgres_docker_setup.png)
+*Screenshot: Docker and PostgreSQL setup for the Ruby quickstart.*
+
+### Lights, Camera, Record! 🎥
+
+Capture the test-cases-
+
+```bash
+keploy record -c "docker compose up --build" --container-name "ruby-books-app"
+```
+
+This will:
+
+- Start a PostgreSQL container
+- Build and start the Ruby application container
+- Initialize the database with sample data
+- Expose the API on port 8000
+
+🔥**Make some API calls**. Postman, Hoppscotch or even curl - take your pick!
+
+### Generate Testcases
+
+To generate testcases we just need to **make some API calls.**
+
+![Recorded testcase example](/img/ruby_testcase.png)
+*Screenshot: Example recorded testcase captured during the quickstart.*
+
+#### 1. Get All Books
+
+```bash
+curl http://localhost:8000/books
+```
+
+#### 2. Get a Specific Book
+
+```bash
+curl http://localhost:8000/books/1
+```
+
+#### 3. Create a New Book
+
+```bash
+curl -X POST http://localhost:8000/books \
+  -H "Content-Type: application/json" \
+  -d '{
+    "title": "The Hobbit",
+    "author": "J.R.R. Tolkien",
+    "isbn": "9780547928227",
+    "published_year": 1937
+  }'
+```
+
+#### 4. Update a Book
+
+```bash
+curl -X PUT http://localhost:8000/books/1 \
+  -H "Content-Type: application/json" \
+  -d '{
+    "title": "The Great Gatsby (Updated)",
+    "author": "F. Scott Fitzgerald",
+    "isbn": "9780743273565",
+    "published_year": 1925
+  }'
+```
+
+#### 5. Delete a Book
+
+```bash
+curl -X DELETE http://localhost:8000/books/1
+```
+
+And once you are done, you can stop the recording and give yourself a pat on the back! With that simple spell, you've conjured up test cases with mocks! Explore the **keploy** directory and you'll discover your handiwork in the `tests` directory and `mocks.yml`.
+
+### Stop the Running Services
+
+```bash
+docker compose down
+```
+
+Want to see if everything works as expected?
+
+### Run Tests 🧪
+
+Time to put things to the test 🧪
+
+```bash
+keploy test -c "docker compose up" --container-name "ruby-books-app" --delay 10
+```
+
+After tests complete, stop the services:
+
+```bash
+docker compose down
+```
+
+> The `--delay` flag? Oh, that's just giving your app a little breather (in seconds) before the test cases come knocking.
+
+Final thoughts? Dive deeper! Try different API calls, tweak the DB response in the `mocks.yml`, or fiddle with the request or response in `test-x.yml`. Run the tests again and see the magic unfold!✨👩‍💻👨‍💻✨
+
+<SectionDivider />
+
+## Running App Locally on Linux/WSL 🐧
+
+We'll be running our sample application locally on Linux/WSL using the workflow below:
+
+### Clone the Application 🧪
+
+```bash
+git clone https://github.com/Nsanjayboruds/keploy-ruby-postgresql-quickstart.git && cd keploy-ruby-postgresql-quickstart
+```
+
+### Install Dependencies
+
+```bash
+bundle install
+```
+
+### Set up PostgreSQL Database
+
+Create the database:
+
+```bash
+createdb booksdb
+```
+
+Initialize the database with the schema:
+
+```bash
+psql -d booksdb -f init.sql
+```
+
+### Configure Environment Variables
+
+```bash
+cp .env.example .env
+# Edit .env if needed for your local PostgreSQL configuration
+```
+
+### Start the Application with Keploy
+
+If the app is already running, stop it before you start recording.
+
+```bash
+keploy record -c "bundle exec ruby app.rb"
+```
+
+The API will be available at `http://localhost:8000`
+
+### Verify the Setup
+
+In a new terminal (keep `keploy record` running in the first terminal), verify the app is healthy:
+
+```bash
+curl http://localhost:8000/health
+```
+
+Expected Response:
+
+```json
+{"status": "healthy", "service": "Ruby Books API"}
+```
+
+### Lights, Camera, Record! 🎥
+
+Keep the same recording session running and start making API calls.
+
+🔥**Make some API calls**. Postman, Hoppscotch or even curl - take your pick!
+
+### Generate Testcases
+
+To generate testcases we just need to **make some API calls.**
+
+#### 1. Get All Books
+
+```bash
+curl http://localhost:8000/books
+```
+
+#### 2. Get a Specific Book
+
+```bash
+curl http://localhost:8000/books/1
+```
+
+#### 3. Create a New Book
+
+```bash
+curl -X POST http://localhost:8000/books \
+  -H "Content-Type: application/json" \
+  -d '{
+    "title": "The Hobbit",
+    "author": "J.R.R. Tolkien",
+    "isbn": "9780547928227",
+    "published_year": 1937
+  }'
+```
+
+#### 4. Update a Book
+
+```bash
+curl -X PUT http://localhost:8000/books/1 \
+  -H "Content-Type: application/json" \
+  -d '{
+    "title": "The Great Gatsby (Updated)",
+    "author": "F. Scott Fitzgerald",
+    "isbn": "9780743273565",
+    "published_year": 1925
+  }'
+```
+
+#### 5. Delete a Book
+
+```bash
+curl -X DELETE http://localhost:8000/books/1
+```
+
+And once you are done, you can stop the recording and give yourself a pat on the back! With that simple spell, you've conjured up test cases with mocks! Explore the **keploy** directory and you'll discover your handiwork in the `tests` directory and `mocks.yml`.
+
+Want to see if everything works as expected?
+
+### Run Tests 🧪
+
+Time to put things to the test 🧪
+
+```bash
+keploy test -c "bundle exec ruby app.rb" --delay 10
+```
+
+After tests complete, stop the app:
+
+```bash
+Ctrl+C
+```
+
+> The `--delay` flag? Oh, that's just giving your app a little breather (in seconds) before the test cases come knocking.
+
+Final thoughts? Dive deeper! Try different API calls, tweak the DB response in the `mocks.yml`, or fiddle with the request or response in `test-x.yml`. Run the tests again and see the magic unfold!✨👩‍💻👨‍💻✨
+
+Happy coding! ✨👩‍💻👨‍💻✨
diff --git a/versioned_sidebars/version-4.0.0-sidebars.json b/versioned_sidebars/version-4.0.0-sidebars.json
index 55f463295..c32d53486 100644
--- a/versioned_sidebars/version-4.0.0-sidebars.json
+++ b/versioned_sidebars/version-4.0.0-sidebars.json
@@ -137,7 +137,18 @@
               "label": "C# (.NET Core)",
               "collapsible": true,
               "collapsed": true,
-              "items": ["quickstart/samples-csharp"]
+              "items": [
+                "quickstart/samples-csharp"
+              ]
+            },
+            {
+              "type": "category",
+              "label": "Ruby",
+              "collapsible": true,
+              "collapsed": true,
+              "items": [
+                "quickstart/samples-ruby"
+              ]
             }
           ]
         },