diff --git a/Components/Scrollbars/Elegant-Custom-Scrollbar/index.html b/Components/Scrollbars/Elegant-Custom-Scrollbar/index.html
new file mode 100644
index 00000000..18c1f614
--- /dev/null
+++ b/Components/Scrollbars/Elegant-Custom-Scrollbar/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container custom-scrollbar">
+        <h1>Elegant Custom Scrollbar</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente expedita aperiam iste suscipit
+            cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto, minima culpa id velit
+            consequatur quae?</p>
+        <p style="margin-bottom: 0;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ipsa sapiente
+            expedita aperiam iste suscipit cum voluptates voluptatibus facilis incidunt perferendis dolore iure iusto,
+            minima culpa id velit consequatur quae?</p>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Components/Scrollbars/Elegant-Custom-Scrollbar/style.css b/Components/Scrollbars/Elegant-Custom-Scrollbar/style.css
new file mode 100644
index 00000000..0ba2eb71
--- /dev/null
+++ b/Components/Scrollbars/Elegant-Custom-Scrollbar/style.css
@@ -0,0 +1,49 @@
+* {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    line-height: 1.5;
+    box-sizing: border-box;
+    color: #44585d;
+}
+
+body {
+    height: 100vh;
+    background-color: #ecf0f1;
+    padding: 1.5rem;
+    margin: 0;
+}
+
+.container {
+    background-color: #fdfdfd;
+    height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    box-shadow: 0 4px 28px rgba(123, 151, 158, .25);
+    border: 1px solid #d6dee1;
+    padding: 1rem;
+    overflow: scroll;
+}
+
+h1 {
+    margin: 0;
+    text-align: center;
+}
+
+/* custom scrollbar */
+::-webkit-scrollbar {
+    width: 20px;
+}
+
+::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #d6dee1;
+    border-radius: 20px;
+    border: 6px solid transparent;
+    background-clip: content-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #a8bbbf;
+}
\ No newline at end of file
diff --git a/assets/html_files/scrollbars.html b/assets/html_files/scrollbars.html
index 6376c509..7096fbf5 100644
--- a/assets/html_files/scrollbars.html
+++ b/assets/html_files/scrollbars.html
@@ -109,7 +109,19 @@ <h1>Modern Minimalist Scrollbar</h1>
                     </a>
                 </div>
             </div>
-            
+            <div class="box">
+                <h1>Elegant Custom Scrollbar</h1>
+                <div class="preview">
+                    <a href="../../Components/Scrollbars/Elegant-Custom-Scrollbar/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Scrollbars/Elegant-Custom-Scrollbar" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Rainbow Scrollbar</h1>
                 <div class="preview">
