diff --git a/Source-Code/DiceRoller/img/1.jpg b/Source-Code/DiceRoller/img/1.jpg
new file mode 100644
index 0000000..d5af33b
Binary files /dev/null and b/Source-Code/DiceRoller/img/1.jpg differ
diff --git a/Source-Code/DiceRoller/img/2.jpg b/Source-Code/DiceRoller/img/2.jpg
new file mode 100644
index 0000000..d3ee4de
Binary files /dev/null and b/Source-Code/DiceRoller/img/2.jpg differ
diff --git a/Source-Code/DiceRoller/img/3.jpg b/Source-Code/DiceRoller/img/3.jpg
new file mode 100644
index 0000000..5a8680a
Binary files /dev/null and b/Source-Code/DiceRoller/img/3.jpg differ
diff --git a/Source-Code/DiceRoller/img/4.jpg b/Source-Code/DiceRoller/img/4.jpg
new file mode 100644
index 0000000..ade1bb4
Binary files /dev/null and b/Source-Code/DiceRoller/img/4.jpg differ
diff --git a/Source-Code/DiceRoller/img/5.jpg b/Source-Code/DiceRoller/img/5.jpg
new file mode 100644
index 0000000..a8d0da1
Binary files /dev/null and b/Source-Code/DiceRoller/img/5.jpg differ
diff --git a/Source-Code/DiceRoller/img/6.jpg b/Source-Code/DiceRoller/img/6.jpg
new file mode 100644
index 0000000..912b551
Binary files /dev/null and b/Source-Code/DiceRoller/img/6.jpg differ
diff --git a/Source-Code/DiceRoller/index.html b/Source-Code/DiceRoller/index.html
new file mode 100644
index 0000000..20319c4
--- /dev/null
+++ b/Source-Code/DiceRoller/index.html
@@ -0,0 +1,20 @@
+<!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>DICE ROLLER</title>
+</head>
+<body>
+    <div id="container">
+        <h1>DICE ROLLER</h1>
+        <label>No of dice:</label>
+        <input type="number" value="1" id="noofdice" min="1">
+        <button type="button" onclick="roll()">Roll</button>
+        <div id="diceresult"></div>
+        <div id="diceimages"></div>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Source-Code/DiceRoller/index.js b/Source-Code/DiceRoller/index.js
new file mode 100644
index 0000000..400a441
--- /dev/null
+++ b/Source-Code/DiceRoller/index.js
@@ -0,0 +1,19 @@
+function roll(){
+
+    const noofdice=document.getElementById("noofdice").value;
+    const diceresult=document.getElementById("diceresult");
+    const diceimages=document.getElementById("diceimages");
+    const values=[];
+    const images=[];
+
+    for(let i=0;i<noofdice;i++){
+        const value=Math.floor(Math.random()*6)+1;
+        values.push(value);images.push(`<div style="display:inline-block; text-align:center; margin:5px;">
+                <img src="img/${value}.jpg" style="width:80px; height:80px;">
+                <div style="font-size:20px; font-weight:normal;">dice no ${i+1}</div>
+            </div>`);
+   
+    }
+    diceresult.textContent=`dice values :${values.join(", ")}`;
+    diceimages.innerHTML=images.join(' ');
+}
\ No newline at end of file
diff --git a/Source-Code/DiceRoller/style.css b/Source-Code/DiceRoller/style.css
new file mode 100644
index 0000000..0ee244f
--- /dev/null
+++ b/Source-Code/DiceRoller/style.css
@@ -0,0 +1,28 @@
+#container{
+    font-family: Arial,sans-serif;
+    text-align: center;
+    font-size:2rem;
+    font-weight: bold;
+}
+button{
+    font-size: 1.5rem;
+    padding: 10px 15px;
+    border-radius: 15px;
+    border:none;
+    background-color: rgb(245, 138, 255);
+    cursor:pointer;
+    font-weight: bold;
+    color:white;
+}
+button:hover{
+    background-color: rgb(244, 92, 255);
+}
+button:active{
+    background-color: rgb(225, 185, 228);
+}
+input{
+    font-size: 2rem;
+    width: 150px;
+    font-weight: bold;
+    text-align: center;
+}
\ No newline at end of file
