diff --git a/index.html b/index.html
index 4cd4ee9..7f91c1e 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,155 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
     <title>DrawDiagrams</title>
 </head>
+
 <body>
-    
+    <div class="toolbar">
+        <p>Kształty</p>
+        <div class="shape-wrapper toolbar-wrapper">
+            <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
+            <div id="shape-ellipse" class="shape" data-type="ellipse"></div>
+            <div id="shape-diamond" class="shape" data-type="diamond"></div>
+            <div id="shape-text" class="shape" data-type="text">Tekst</div>
+        </div>
+    </div>
+    <div class="canvas-container">
+        <div id="paper"></div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
+    <script>
+        $(document).ready(function () {
+            //init paper - Start
+            const graph = new joint.dia.Graph();
+            const paper = new joint.dia.Paper({
+                el: $('#paper'),
+                model: graph,
+                width: 1920,
+                height: 1080,
+                gridSize: 20,
+            });
+            //init paper - END
+
+            //create shape - START
+            function createRectangle(paperX, paperY) {
+                const rect = new joint.shapes.standard.Rectangle({
+                    position: { x: paperX - 50, y: paperY - 30 },
+                    size: { width: 100, height: 60 },
+                    attrs: {
+                        body: {
+                            fill: 'transparent',
+                            stroke: '#000000',
+                            strokeWidth: 1
+                        },
+                        label: {
+                            text: ''
+                        }
+                    }
+                });
+                graph.addCell(rect);
+            }
+
+            function createDiamond(paperX, paperY) {
+                const rect = new joint.shapes.standard.Rectangle({
+                    position: { x: paperX - 30, y: paperY - 30 },
+                    size: { width: 60, height: 60 },
+                    angle: 45,
+                    attrs: {
+                        body: {
+                            fill: 'transparent',
+                            stroke: '#000000',
+                            strokeWidth: 1
+                        },
+                        label: {
+                            text: ''
+                        }
+                    }
+                });
+                graph.addCell(rect);
+            }
+
+            function createEllipse(paperX, paperY) {
+                const rect = new joint.shapes.standard.Ellipse({
+                    position: { x: paperX - 50, y: paperY - 30 },
+                    size: { width: 100, height: 60 },
+                    attrs: {
+                        body: {
+                            fill: 'transparent',
+                            stroke: '#000000',
+                            strokeWidth: 1
+                        },
+                        label: {
+                            text: ''
+                        }
+                    }
+                });
+                graph.addCell(rect);
+            }
+
+            function createText(paperX, paperY) {
+                const textBlock = new joint.shapes.standard.TextBlock({
+                    position: { x: paperX - 50, y: paperY - 20 },
+                    size: { width: 100, height: 40 },
+                    attrs: {
+                        body: {
+                            fill: 'transparent',
+                            stroke: '#000000',
+                            strokeWidth: 1
+                        },
+                        label: {
+                            text: 'Tekst...',
+                            fill: '#000000'
+                        }
+                    }
+                });
+                graph.addCell(textBlock);
+            }
+            //create shape - END
+
+            //init test draggalble - START
+            $('.shape').attr('draggable', true);
+            $('.shape').on('dragstart', function (event) {
+                event.originalEvent.dataTransfer.setData('shape', $(this).data('type'));
+            });
+
+            $('#paper').on('dragover', function (event) {
+                event.preventDefault();
+            });
+
+
+            $('#paper').on('drop', function (event) {
+                event.preventDefault();
+                const shapeType = event.originalEvent.dataTransfer.getData('shape');
+
+                const containerOffset = $(this).offset();
+                const x = event.originalEvent.clientX - containerOffset.left;
+                const y = event.originalEvent.clientY - containerOffset.top;
+
+                const scale = paper.scale();
+                const translate = paper.translate();
+                const paperX = (x - translate.tx) / scale.sx;
+                const paperY = (y - translate.ty) / scale.sy;
+
+                if (shapeType == 'rectangle') {
+                    createRectangle(paperX, paperY);
+                } else if (shapeType == "ellipse") {
+                    createEllipse(paperX, paperY)
+                } else if (shapeType == 'diamond') {
+                    createDiamond(paperX, paperY);
+                } else if (shapeType == "text") {
+                    createText(paperX, paperY);
+                }
+            });
+            //init test draggable - END
+        });
+    </script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index e69de29..a9a9bde 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,64 @@
+ .shape-wrapper {
+     display: grid;
+     grid-template-columns: repeat(2, 1fr);
+     grid-template-rows: repeat(2, auto);
+     gap: 30px 10px;
+     padding-bottom: 40px;
+ }
+
+ #shape-rectangle {
+     width: 80px;
+     height: 48px;
+ }
+
+ #shape-ellipse {
+     width: 80px;
+     height: 48px;
+     border-radius: 50%;
+ }
+
+ #shape-diamond {
+     height: 48px;
+     width: 48px;
+     transform: rotate(45deg) translateX(15px);
+ }
+
+ #shape-text {
+     width: 80px;
+     height: 48px;
+     border-style: dashed;
+     color: #ffffff;
+     font-size: 14px;
+     display: flex;
+     align-items: center;
+     justify-content: center;
+ }
+
+ .shape {
+     background: transparent;
+     border: 1px solid white;
+ }
+
+ .toolbar {
+     background: #3498db;
+     color: white;
+     padding: 20px;
+     display: flex;
+     flex-wrap: wrap;
+     flex-direction: column;
+     gap: 10px;
+     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+     position: absolute;
+     width: 300px;
+     left: 0px;
+     top: 0px;
+     height: 100vh;
+     z-index: 9;
+     border-top-right-radius: 30px;
+     border-bottom-right-radius: 30px;
+ }
+
+ .toolbar-wrapper {
+     padding-bottom: 30px;
+     padding: 20px;
+ }
\ No newline at end of file
