diff --git a/src/assets/icons/Radio.svg b/src/assets/icons/Radio.svg
new file mode 100644
index 0000000..0dee182
--- /dev/null
+++ b/src/assets/icons/Radio.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11" cy="11" r="11" fill="#FDDF01"/>
+<path d="M8.95832 13.625L16.0208 6.5625C16.1875 6.39583 16.3819 6.3125 16.6042 6.3125C16.8264 6.3125 17.0208 6.39583 17.1875 6.5625C17.3542 6.72917 17.4375 6.92722 17.4375 7.15667C17.4375 7.38611 17.3542 7.58389 17.1875 7.75L9.54165 15.4167C9.37499 15.5833 9.18054 15.6667 8.95832 15.6667C8.7361 15.6667 8.54165 15.5833 8.37499 15.4167L4.79165 11.8333C4.62499 11.6667 4.54499 11.4689 4.55165 11.24C4.55832 11.0111 4.64527 10.8131 4.81249 10.6458C4.97971 10.4786 5.17777 10.3953 5.40665 10.3958C5.63554 10.3964 5.83332 10.4797 5.99999 10.6458L8.95832 13.625Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/svgs/checked-green.svg b/src/assets/icons/svgs/checked-green.svg
new file mode 100644
index 0000000..ef446d3
--- /dev/null
+++ b/src/assets/icons/svgs/checked-green.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.25" y="0.25" width="23.5" height="23.5" rx="1.75" fill="#43A047" stroke="black" stroke-width="0.5"/>
+<path d="M9.75416 14.8875L17.5229 7.11875C17.7062 6.93542 17.9201 6.84375 18.1646 6.84375C18.409 6.84375 18.6229 6.93542 18.8062 7.11875C18.9896 7.30208 19.0812 7.51994 19.0812 7.77233C19.0812 8.02472 18.9896 8.24228 18.8062 8.425L10.3958 16.8583C10.2125 17.0417 9.9986 17.1333 9.75416 17.1333C9.50971 17.1333 9.29583 17.0417 9.11249 16.8583L5.17083 12.9167C4.98749 12.7333 4.89949 12.5158 4.90683 12.264C4.91416 12.0122 5.0098 11.7944 5.19374 11.6104C5.37769 11.4265 5.59555 11.3348 5.84733 11.3354C6.0991 11.336 6.31666 11.4277 6.49999 11.6104L9.75416 14.8875Z" fill="white"/>
+</svg>
diff --git a/src/components/ui/Checkbox.jsx b/src/components/ui/Checkbox.jsx
new file mode 100644
index 0000000..7d8fc70
--- /dev/null
+++ b/src/components/ui/Checkbox.jsx
@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+
+const Checkbox = forwardRef(({
+  checked,
+  onChange,
+  disabled = false,
+  icon,
+  ...rest
+}, ref) => {
+  return (
+    <label style={{ position: "relative", display: "inline-block", width: 24, height: 24 }}>
+      <input
+        ref={ref}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        style={{ position: "absolute", opacity: 0, width: 0, height: 0 }}
+        {...rest}
+      />
+      <span style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 24,
+        height: 24,
+        border: "0.5px solid black",
+        borderRadius: 4,
+        background: checked ? "green" : "white",
+      }}>
+        {checked && icon}
+      </span>
+    </label>
+  );
+});
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;
\ No newline at end of file
diff --git a/src/components/ui/Radio.jsx b/src/components/ui/Radio.jsx
new file mode 100644
index 0000000..e58fa66
--- /dev/null
+++ b/src/components/ui/Radio.jsx
@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+
+const Radio = forwardRef(({
+  checked,
+  onChange,
+  disabled = false,
+  icon,
+  ...rest
+}, ref) => {
+  return (
+    <label style={{ display: "inline-block", width: 24, height: 24 }}>
+      <input
+        ref={ref}
+        type="radio"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        style={{ position: "absolute", opacity: 0, width: 0, height: 0 }}
+        {...rest}
+      />
+      <span style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 24,
+        height: 24,
+        borderRadius: "50%",
+        border: "1px solid #ccc",
+        background: checked ? "yellow" : "#ccc",
+      }}>
+        {checked && icon}
+      </span>
+    </label>
+  );
+});
+
+Radio.displayName = "Radio";
+
+export default Radio;
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index 5a8543e..76711ba 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 import { App } from './App.jsx'
-import Themes from './components/ui/Themes.jsx'
+import Themes from './components/Themes.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(