diff --git a/.gitignore b/.gitignore
index e6fab1b..d1ae52b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,11 @@ main.js
 data.json
 
 #vscode
-.vscode
\ No newline at end of file
+.vscode
+
+#buildfiles
+settings.js
+view/App.js
+ReactView.js
+settings.js
+view.js
\ No newline at end of file
diff --git a/ReactView.tsx b/ReactView.tsx
index e924dac..9f1a877 100644
--- a/ReactView.tsx
+++ b/ReactView.tsx
@@ -1,6 +1,8 @@
 import * as React from "react";
 import App from "./view/App";
 
-export const ReactView = () => {
-  return <App />;
-};
\ No newline at end of file
+export default function ReactView(props: any){
+  return(
+    <App username={props.userID} apiToken={props.tokenAPI}/>
+  )
+}
\ No newline at end of file
diff --git a/main.ts b/main.ts
index f701dd2..16aa5b7 100644
--- a/main.ts
+++ b/main.ts
@@ -4,9 +4,13 @@ import { ExampleView, VIEW_TYPE_EXAMPLE} from "./view"
 
 interface ExamplePluginSettings {
     dateFormat: string
+    userID: string
+    apiToken: string
 }
 const DEFAULT_SETTINGS: Partial<ExamplePluginSettings> = {
-    dateFormat: "YYYY-MM-DD"
+    dateFormat: "YYYY-MM-DD",
+    userID: "",
+    apiToken: ""
 }
 export default class ExamplePlugin extends Plugin {
     settings: ExamplePluginSettings;
@@ -17,7 +21,7 @@ export default class ExamplePlugin extends Plugin {
         this.addSettingTab(new ExampleSettingsTab(this.app, this));
         this.registerView(
             VIEW_TYPE_EXAMPLE,
-            (leaf) => (this.view = new ExampleView(leaf))
+            (leaf) => (this.view = new ExampleView(leaf, this))
           );
         this.addRibbonIcon("dice", "Activate view", () => {  //activate view
             this.activateView();
diff --git a/view.ts b/old_view.ts
similarity index 86%
rename from view.ts
rename to old_view.ts
index d54ef70..40e34a4 100644
--- a/view.ts
+++ b/old_view.ts
@@ -1,12 +1,14 @@
 import { ItemView,WorkspaceLeaf } from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { ReactView } from "./ReactView";
+import ReactView from "./ReactView";
+import ExamplePlugin from "main";
 
 
 export const VIEW_TYPE_EXAMPLE = "example-view"
 
 export class ExampleView extends ItemView {
+    plugin: ExamplePlugin;
     constructor(leaf: WorkspaceLeaf) {
         super(leaf)
     }
diff --git a/package.json b/package.json
index 69984fe..27eb3d7 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,11 @@
     "@types/node": "^14.14.37",
     "@types/react": "^17.0.27",
     "@types/react-dom": "^17.0.9",
+    "css-loader": "^6.4.0",
+    "extract-text-webpack-plugin": "^2.1.2",
     "obsidian": "^0.12.0",
     "rollup": "^2.32.1",
+    "style-loader": "^3.3.0",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
   },
diff --git a/settings.ts b/settings.ts
index 8d40205..19a68be 100644
--- a/settings.ts
+++ b/settings.ts
@@ -12,19 +12,31 @@ export class ExampleSettingsTab extends PluginSettingTab {
     display(): void {
         let { containerEl } = this;
         containerEl.empty();
-        
+
         new Setting(containerEl)
-            .setName("Date format")
-            .setDesc("Default date format")
-            .addText((text) => 
-            
-                text
-                    .setPlaceholder("MMMM dd, yyyy")
-                    .setValue(this.plugin.settings.dateFormat)
-                    .onChange(async (value) => {
-                        this.plugin.settings.dateFormat = value;
-                        await this.plugin.saveSettings();
-                    })
-            );
+        .setName("Habitica User ID")
+        .setDesc("Can be found in Settings > API")
+        .addText((text) => 
+            text
+                .setPlaceholder("User ID")
+                .setValue(this.plugin.settings.userID)
+                .onChange(async (value) => {
+                    this.plugin.settings.userID = value;
+                    await this.plugin.saveSettings();
+                })
+        );
+
+        new Setting(containerEl)
+        .setName("Habitica API Token")
+        .setDesc("Can be found in Settings > API")
+        .addText((text) => 
+            text
+                .setPlaceholder("API Token")
+                .setValue(this.plugin.settings.apiToken)
+                .onChange(async (value) => {
+                    this.plugin.settings.apiToken = value;
+                    await this.plugin.saveSettings();
+                })
+        );
     }
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 39694e4..5428488 100644
--- a/styles.css
+++ b/styles.css
@@ -11,4 +11,25 @@
   
   .book__author {
     color: var(--text-muted);
-  }
\ No newline at end of file
+  }
+
+.todo-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0px 0px 0;
+  width: 80%;
+  border-bottom: 1px solid #cecece;
+  font-family: Roboto, sans-serif;
+  font-weight: normal;
+  font-size: 16px;
+  color: #ffffff;
+}
+
+input[type=checkbox] {
+  margin-right: 10px;
+}
+
+input[type=checkbox]:focus {
+  outline: 0;
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 4968d9a..3846256 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,5 +19,5 @@
   },
   "include": [
     "**/*.ts"
-  ]
+, "view/TodoItem.tsx"  ]
 }
diff --git a/view.tsx b/view.tsx
new file mode 100644
index 0000000..5f69b9b
--- /dev/null
+++ b/view.tsx
@@ -0,0 +1,35 @@
+import { ItemView,WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import ReactView from "./ReactView";
+import ExamplePlugin from "main";
+
+
+export const VIEW_TYPE_EXAMPLE = "example-view"
+
+export class ExampleView extends ItemView {
+    plugin: ExamplePlugin;
+    constructor(leaf: WorkspaceLeaf, plugin: ExamplePlugin) {
+        super(leaf)
+        this.plugin = plugin
+    }
+
+    getViewType() {
+        return VIEW_TYPE_EXAMPLE
+    }
+
+    getDisplayText() {
+        return "Example View"
+    }
+
+    async onOpen() {
+        ReactDOM.render(
+            <ReactView userID = {this.plugin.settings.userID} tokenAPI = {this.plugin.settings.apiToken}/>,
+           this.containerEl.children[1]
+        )
+    }
+
+    async onClose(){
+        ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+    }
+}
\ No newline at end of file
diff --git a/view/App.tsx b/view/App.tsx
index 6eb0814..9bf1f4d 100644
--- a/view/App.tsx
+++ b/view/App.tsx
@@ -1,12 +1,15 @@
 import * as React from "react";
 import { getTasks } from "./habiticaAPI"
+import TodoItem from "./TodoItem"
 
-const username = "<key>"
-const credentials = "<key>"
+let username = ""
+let credentials = ""
 
 class App extends React.Component<any,any> {
     constructor(props: any) {
         super(props)
+        username = this.props.username
+        credentials = this.props.apiToken
         this.state = {
             isLoaded: false,
             tasks: ""
@@ -17,7 +20,6 @@ class App extends React.Component<any,any> {
             .then(res => res.json())
             .then(
                 result => {
-                    console.log(result.data)
                     this.setState({
                         isLoaded: true,
                         tasks: result.data
@@ -40,7 +42,8 @@ class App extends React.Component<any,any> {
             return <div>Loading...</div>;
         } else {
             const listItems = tasks.map((tasks: any) =>
-                <li>{tasks.text}</li>
+                <TodoItem key={tasks.id} task={tasks}/>
+                
             );
             return (
                 <ul>{listItems}</ul>
diff --git a/view/TodoItem.tsx b/view/TodoItem.tsx
new file mode 100644
index 0000000..84a5415
--- /dev/null
+++ b/view/TodoItem.tsx
@@ -0,0 +1,12 @@
+ import * as React from "react";
+
+function TodoItem(props: any) {
+    return (
+        <div className="todo-item">
+            <input type="checkbox" />
+            <p>{props.task.text}</p>
+        </div>
+    )
+}
+
+export default TodoItem
\ No newline at end of file