diff --git a/Themed UI kit tutorial/Themed UI kit.html b/Themed UI kit tutorial/Themed UI kit.html
new file mode 100644
index 00000000..a72b8a7b
--- /dev/null
+++ b/Themed UI kit tutorial/Themed UI kit.html	
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neumorphic UI Kit</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #e0e0e0; /* Light theme background */
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            transition: background-color 0.3s, color 0.3s;
+        }
+
+        /* Dark theme styles */
+        body.dark {
+            background-color: #1a1a1a;
+            color: #f0f0f0;
+        }
+
+        h1 {
+            margin-bottom: 20px;
+        }
+
+        /* Neumorphic card */
+        .card {
+            background: #ffffff;
+            border-radius: 15px;
+            box-shadow: 8px 8px 15px rgba(200, 200, 200, 0.5),
+                        -8px -8px 15px rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            width: 300px;
+            text-align: center;
+            transition: box-shadow 0.3s;
+        }
+
+        .card:hover {
+            box-shadow: 5px 5px 10px rgba(200, 200, 200, 0.5),
+                        -5px -5px 10px rgba(255, 255, 255, 0.7);
+        }
+
+        /* Neumorphic button */
+        .button {
+            background: #ffffff;
+            border: none;
+            border-radius: 12px;
+            box-shadow: 5px 5px 15px rgba(200, 200, 200, 0.5),
+                        -5px -5px 15px rgba(255, 255, 255, 0.7);
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: box-shadow 0.3s, transform 0.3s;
+            margin: 10px;
+        }
+
+        .button:hover {
+            box-shadow: 3px 3px 10px rgba(200, 200, 200, 0.5),
+                        -3px -3px 10px rgba(255, 255, 255, 0.7);
+            transform: translateY(2px);
+        }
+
+        /* Neumorphic slider */
+        .slider {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 100%;
+            height: 10px;
+            border-radius: 5px;
+            background: #e0e0e0;
+            outline: none;
+            margin: 10px 0;
+            box-shadow: inset 5px 5px 10px rgba(200, 200, 200, 0.5),
+                        inset -5px -5px 10px rgba(255, 255, 255, 0.7);
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #ffffff;
+            box-shadow: 5px 5px 10px rgba(200, 200, 200, 0.5),
+                        -5px -5px 10px rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+        }
+
+        /* Neumorphic modal */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: #ffffff;
+            border-radius: 15px;
+            box-shadow: 8px 8px 15px rgba(200, 200, 200, 0.5),
+                        -8px -8px 15px rgba(255, 255, 255, 0.7);
+            padding: 20px;
+            z-index: 10;
+            transition: box-shadow 0.3s;
+        }
+
+        .modal.show {
+            display: block;
+        }
+
+        /* Toggle button */
+        .toggle {
+            display: flex;
+            align-items: center;
+            margin: 20px;
+        }
+
+        .toggle input {
+            display: none;
+        }
+
+        .toggle-label {
+            width: 50px;
+            height: 25px;
+            background: #e0e0e0;
+            border-radius: 50px;
+            position: relative;
+            transition: background 0.3s;
+        }
+
+        .toggle-label::after {
+            content: '';
+            width: 21px;
+            height: 21px;
+            border-radius: 50%;
+            background: #ffffff;
+            position: absolute;
+            left: 2px;
+            top: 2px;
+            transition: transform 0.3s;
+        }
+
+        .toggle input:checked + .toggle-label {
+            background: #4CAF50;
+        }
+
+        .toggle input:checked + .toggle-label::after {
+            transform: translateX(25px);
+        }
+    </style>
+</head>
+<body>
+
+    <h1>Neumorphic UI Kit</h1>
+
+    <div class="toggle">
+        <input type="checkbox" id="themeToggle" onchange="document.body.classList.toggle('dark')">
+        <label class="toggle-label" for="themeToggle"></label>
+    </div>
+
+    <div class="card">
+        <h2>Card Title</h2>
+        <p>This is a neumorphic card. Hover to see the effect.</p>
+        <button class="button">Click Me</button>
+    </div>
+
+    <input type="range" class="slider" min="1" max="100" value="50">
+
+    <button class="button" onclick="document.querySelector('.modal').classList.add('show')">Open Modal</button>
+
+    <div class="modal">
+        <h2>Modal Title</h2>
+        <p>This is a neumorphic modal. Click outside to close.</p>
+        <button class="button" onclick="document.querySelector('.modal').classList.remove('show')">Close</button>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Themed UI kit tutorial/readne.md b/Themed UI kit tutorial/readne.md
new file mode 100644
index 00000000..66a04dd7
--- /dev/null
+++ b/Themed UI kit tutorial/readne.md	
@@ -0,0 +1 @@
+this is Themed UI kit tutorial.
