diff --git a/src/block.tsx b/src/block.tsx
index c7725d0..cd6d94c 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -236,13 +236,23 @@ export const Block: React.FC<Block> = props => {
         );
       case "bulleted_list":
       case "numbered_list":
+      case "to_do":
+        const todo = blockValue.type === "to_do";
+
         const wrapList = (content: React.ReactNode, start?: number) =>
-          blockValue.type === "bulleted_list" ? (
-            <ul className="notion-list notion-list-disc">{content}</ul>
-          ) : (
+          blockValue.type === "numbered_list" ? (
             <ol start={start} className="notion-list notion-list-numbered">
               {content}
             </ol>
+          ) : (
+            <ul
+              className={classNames(
+                "notion-list",
+                todo ? "notion-list-todo" : "notion-list-disc"
+              )}
+            >
+              {content}
+            </ul>
           );
 
         let output: JSX.Element | null = null;
@@ -251,14 +261,22 @@ export const Block: React.FC<Block> = props => {
           output = (
             <>
               {blockValue.properties && (
-                <li>{renderChildText(blockValue.properties.title)}</li>
+                <li>
+                  {todo && (
+                    <div className="notion-checkbox notion-checkbox-off" />
+                  )}
+                  {renderChildText(blockValue.properties.title)}
+                </li>
               )}
               {wrapList(children)}
             </>
           );
         } else {
           output = blockValue.properties ? (
-            <li>{renderChildText(blockValue.properties.title)}</li>
+            <li>
+              {todo && <div className="notion-checkbox notion-checkbox-on" />}
+              {renderChildText(blockValue.properties.title)}
+            </li>
           ) : null;
         }
 
diff --git a/src/styles.css b/src/styles.css
index 153d46c..e803396 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -313,6 +313,34 @@ img.notion-page-icon {
   padding-left: 0px;
 }
 
+.notion-checkbox {
+  display: inline-flex;
+  vertical-align: text-bottom;
+  list-style: none;
+  width: 16px;
+  height: 16px;
+  background-size: 16px;
+  margin-left: 2px;
+  margin-right: 5px;
+}
+.notion-list-todo {
+  list-style-type: none;
+  padding-inline-start: 1.7em;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+div > .notion-list-todo {
+  padding-inline-start: 0;
+}
+
+.notion-checkbox-off {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
+.notion-checkbox-on {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
+}
+
 .notion-asset-wrapper {
   margin: 0.5rem auto 0.5rem;
   max-width: 100%;