diff --git a/frontend/static/quotes/code_css.json b/frontend/static/quotes/code_css.json
new file mode 100644
index 000000000..43858902b
--- /dev/null
+++ b/frontend/static/quotes/code_css.json
@@ -0,0 +1,131 @@
+{
+  "language": "code_css",
+  "groups": [
+    [0, 100],
+    [101, 300],
+    [301, 600],
+    [601, 9999]
+  ],
+  "quotes": [
+    {
+      "text": ".shadow {\n\tbox-shadow:\n\t2px 2px 4px #888888;\n}",
+      "source": "Basic CSS Example",
+      "id": 1,
+      "length": 46
+    },
+    {
+      "text": ".container{\n\tmax-width:960px;\n\tmargin:0 auto;\n\tpadding:0 15px;\n}",
+      "source": "Basic CSS Example",
+      "id": 2,
+      "length": 64
+    },
+    {
+      "text": "p.center {\n\ttext-align: center;\n\tcolor: red;\n}\n\np.large {\n\tfont-size: 300%\n;}",
+      "source": "W3Schools CSS Class Selector",
+      "id": 3,
+      "length": 77
+    },
+    {
+      "text": ".box {\n\tborder: 5px solid darkblue;\n\theight: 150px;\n\twidth: 200px;\n}",
+      "source": "MDN Web Docs Sizing Items in CSS",
+      "id": 4,
+      "length": 68
+    },
+    {
+      "text": "* [lang^=\"en\"] {\n\tcolor: green;\n}\n\n*.warning {\n\tcolor: red;\n}\n\n*#maincontent {\n\tborder: 1px solid blue;\n}\n\n.floating {\n\tfloat: left;\n}\n\n/* automatically clear the next sibling after a floating element */\n.floating + * {\n\tclear: left;\n}",
+      "source": "MDN Web Docs Universal Selectors",
+      "id": 5,
+      "length": 235
+    },
+    {
+      "text": "img.one {\n\theight: auto;\n}\n\nimg.two {\n\theight: 200px;\n\twidth: 200px;\n}\n\ndiv.three {\n\theight: 300px;\n\twidth: 300px;\n\tbackground-color: powderblue;\n}",
+      "source": "W3Schools CSS Set the Height and Width of Different Elements",
+      "id": 6,
+      "length": 147
+    },
+    {
+      "text": ".form {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\tmargin: 80px auto;\n\tfont-size: 20px;\n\twidth: 75%;\n\tborder-radius: 10px;\n\tbox-shadow: 0 4px 8px rgb(0, 0, 0, 0.4);\n\tbox-sizing: border-box;\n}",
+      "source": "Ruan Buhr - stelfix sourcecode",
+      "id": 7,
+      "length": 220
+    },
+    {
+      "text": ".button {\n\tbackground-color: #007bff;\n\tcolor: #ffffff;\n\tpadding: 10px 20px;\n\tborder: none;\n\tborder-radius: 5px;\n\tcursor: pointer;\n\ttransition: background-color 0.3s, color 0.3s;\n}\n\n.button:hover {\n\tbackground-color: #0056b3;\n\tcolor: #ffffff;\n}",
+      "source": "Basic CSS Button Hover Example",
+      "id": 8,
+      "length": 243
+    },
+    {
+      "text": "body {\n\tbackground-color: #f0f0f0;\n}\n\n@media (max-width: 600px) {\n\tbody {\n\t\tbackground-color: #e6f7ff;\n\t}\n}\n\n@media (min-width: 601px) and (max-width: 992px) {\n\tbody {\n\t\tbackground-color: #f9f6ff;\n\t}\n}\n\n@media (min-width: 993px) {\n\tbody {\n\t\tbackground-color: #f2f2f2;\n\t}\n}",
+      "source": "Basic Media Query Example",
+      "id": 9,
+      "length": 272
+    },
+    {
+      "text": ".container {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100vh;\n}\n\n.header {\n\tbackground-color: #333;\n\tcolor: #fff;\n\tpadding: 10px;\n}\n\n.main-container {\n\tdisplay: flex;\n\tflex: 1;\n}\n\n.sidebar {\n\tbackground-color: #f0f0f0;\n\tpadding: 10px;\n\twidth: 250px;\n}\n\n.content {\n\tflex: 1;\n\tpadding: 10px;\n}\n\n.footer {\n\tbackground-color: #333;\n\tcolor: #fff;\n\tpadding: 10px;\n}",
+      "source": "CSS Flexbox Example",
+      "id": 10,
+      "length": 367
+    },
+    {
+      "text": ".grid-container {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr 1fr;\n\tgrid-gap: 10px;\n}\n\n.grid-item {\n\tbackground-color: #f0f0f0;\n\tpadding: 20px;\n\ttext-align: center;\t}",
+      "source": "CSS Grid Example",
+      "id": 11,
+      "length": 170
+    },
+    {
+      "text": ".wrapper {\n\tborder: 2px dotted rgb(96, 139, 168);\n\twidth: 500px;\n}\n\n.box {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 10px;\n}\n\n.box>* {\n\tflex: 1 1 160px;\n}",
+      "source": "MDN Web Docs CSS Mastering Wrapping of Flex Items",
+      "id": 12,
+      "length": 152
+    },
+    {
+      "text": ".center {\n\theight: 200px;\n\tposition: relative;\n\tborder: 3px solid green;\n}\n\n.center p {\n\tmargin: 0;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\t-ms-transform: translate(-50%, -50%);\n\ttransform: translate(-50%, -50%);\n}",
+      "source": "W3Schools CSS Center Items Vertically and Horizontally",
+      "id": 13,
+      "length": 219
+    },
+    {
+      "text": "body {\n\tfont-size: 28px;\n}\n\nul {\n\tlist-style-type: none;\n\tmargin: 0;\n\tpadding: 0;\n\toverflow: hidden;\n\tbackground-color: #333;\n\tposition: -webkit-sticky; /* Safari */\n\tposition: sticky;\n\ttop: 0;\n}\n\nli {\n\tfloat: left;\n}li a {\n\tdisplay: block;\n\tcolor: white;\n\ttext-align: center;\n\tpadding: 14px 16px;\n\ttext-decoration: none;\n}\n\nli a:hover {\n\tbackground-color: #111;\n}\n\n.active {\n\tbackground-color: #4CAF50;\n}",
+      "source": "W3Schools CSS Sticky Navigation Bar Example",
+      "id": 14,
+      "length": 405
+    },
+    {
+      "text": ".dropbtn {background-color: #4CAF50;\n\tcolor: white;\n\tpadding: 16px;\n\tfont-size: 16px;\n\tborder: none;\n\tcursor: pointer;\n}\n\n.dropdown {\n\tposition: relative;\n\tdisplay: inline-block;\n}\n\n.dropdown-content {\n\tdisplay: none;\n\tposition: absolute;\n\tright: 0;\n\tbackground-color: #f9f9f9;\n\tmin-width: 160px;\n\tbox-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n\tz-index: 1;\n}\n\n.dropdown-content a {\n\tcolor: black;\n\tpadding: 12px 16px;\n\ttext-decoration: none;\n\tdisplay: block;\n}\n\n.dropdown-content a:hover {background-color: #f1f1f1;}\n\n.dropdown:hover .dropdown-content {\n\tdisplay: block;\n}\n\n.dropdown:hover .dropbtn {\n\tbackground-color: #3e8e41;\n}",
+      "source": "W3Schools CSS Right-Aligned Dropdown Menu",
+      "id": 15,
+      "length": 630
+    },
+    {
+      "text": "input[type=button], input[type=submit], input[type=reset] {\n\tbackground-color: #04AA6D;\n\tborder: none;\n\tcolor: white;\n\tpadding: 16px 32px;\n\ttext-decoration: none;\n\tmargin: 4px 2px;\n\tcursor: pointer;\n}",
+      "source": "W3Schools CSS Styling Input Buttons",
+      "id": 16,
+      "length": 200
+    },
+    {
+      "text": "#rcorners1 {\n\tborder-radius: 15px 50px 30px 5px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}\n\n#rcorners2 {\n\tborder-radius: 15px 50px 30px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}\n\n#rcorners3 {\n\tborder-radius: 15px 50px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}\n\n#rcorners4 {\n\tborder-radius: 15px;\n\tbackground: #73AD21;\n\tpadding: 20px;\n\twidth: 200px;\n\theight: 150px;\n}",
+      "source": "W3Schools CSS Round Each Corner Separately",
+      "id": 17,
+      "length": 455
+    },
+    {
+      "text": "@media (max-width: 950px) {\n\tnav .menu {\n\t\tdisplay: flex;\n\t}\n\nnav {\n\t\tflex-direction: column;\n\t\talign-items: start;\n\t}\n\n\tnav ul {\n\t\tdisplay: none;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tmargin-bottom: 0.25rem;\n\t}\n\n\tnav ul.open {\n\t\tdisplay: flex;\n\t}\n\n\tnav ul li {\n\t\twidth: 100%;\n\t\ttext-align: center;\n\t}\n}",
+      "source": "Ruan Buhr - stelfix sourcecode",
+      "id": 18,
+      "length": 308
+    },
+    {
+      "text": "@keyframes slide {\n\t0% { margin-left: 0; }\n\t50% { margin-left: 200px; }\n\t100% { margin-left: 0; }\n}\n\n.slide-div {\n\twidth: 200px;\n\theight: 100px;\n\tbackground-color: lightgreen;\n\tanimation: slide 3s infinite;\n}",
+      "source": "Basic CSS Animation",
+      "id": 19,
+      "length": 208
+    },
+    {
+      "text": "#grad1 {\n\theight: 200px;\n\tbackground-color: red;\n\tbackground-image: linear-gradient(red, yellow, green);\n}\n\n#grad2 {\n\theight: 200px;\n\tbackground-color: red;\n\tbackground-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);\n}\n\n#grad3 {\n\theight: 200px;\n\tbackground-color: red;\n\tbackground-image: linear-gradient(red 10%, green 85%, blue 90%);\n}",
+      "source": "W3Schools CSS Linear Gradient with Multiple Color Stops",
+      "id": 20,
+      "length": 362
+    }
+  ]
+}