diff --git a/Villefort.cabal b/Villefort.cabal
--- a/Villefort.cabal
+++ b/Villefort.cabal
@@ -1,7 +1,7 @@
 name:                Villefort
-version:             0.1.0.4
+version:             0.1.0.5
 synopsis: Villefort is a task manager and time tracker written in haskell.
-description: It is based off of a sqlite database and has the ability to add new tasks
+description: Villefort is powered by a sqlite
 homepage:            https://github.com/Chrisr850/Villefort#readme
 license:             BSD3
 license-file:        LICENSE
@@ -13,6 +13,9 @@
 extra-source-files:  README.md
 cabal-version:       >=1.10
 data-files:            data/todo.db
+                     , templates/*.html
+                     , templates/*.ts
+                     , js.js
                        
 library
   hs-source-dirs:      src
@@ -35,7 +38,8 @@
 executable Villefort
   hs-source-dirs:      app
   main-is:             Main.hs
-  ghc-options:         -threaded -rtsopts -with-rtsopts=-N 
+  ghc-options:         -threaded -rtsopts -with-rtsopts=-N
+  other-modules:       Paths_Villefort
   build-depends:       base
                      , Villefort
                      , scotty >= 0.11.0 && < 0.12
diff --git a/app/Main.hs b/app/Main.hs
--- a/app/Main.hs
+++ b/app/Main.hs
@@ -13,7 +13,7 @@
 import Database
 import Todo
 import Stats
-
+import Paths_Villefort
 
 
 
@@ -38,8 +38,8 @@
  
 
 makeNewPage = do
-  path <- path
-  rawhtml <- liftIO $ readFile (path ++ "templates/add.html")
+  path <- getDataFileName "templates/add.html"
+  rawhtml <- liftIO $ readFile path
   let split = splitOn "?" rawhtml
   subjects <- getSubjects
   let radiobuttons = map makeRadio subjects
@@ -98,8 +98,8 @@
    
 
     get "/js-chart-widgets.min.js" $ do
-      path <-liftIO $ path
-      file (path ++ "js.js")
+      path <- liftIO $  getDataFileName "js.js"
+      file path
       
     get "/stat" $ do
       page <- liftIO $ genStats
diff --git a/js.js b/js.js
new file mode 100644
--- /dev/null
+++ b/js.js
@@ -0,0 +1,19 @@
+(function(){var s,m,o,A,p,B,C,w,D,E,t,u,x,F,q=Array.prototype.slice,n=Object.prototype.hasOwnProperty,y=function(b,a){function c(){this.constructor=b}for(var d in a)if(n.call(a,d))b[d]=a[d];c.prototype=a.prototype;b.prototype=new c;b.__super__=a.prototype;return b};p=function(){return function(b,a){this.x=b;this.y=a}}();B=function(){function b(a,c,d,f){this.x=a;this.y=c;this.w=d;this.h=f}b.prototype.translated=function(a){return new b(this.x+a.x,this.y+a.y,this.w,this.h)};b.prototype.scaled=function(a){return new b(this.x,
+this.y,this.w*a,this.h*a)};b.prototype.center=function(){return new p(this.x+this.w/2,this.y+this.h/2)};b.prototype.centeredAt=function(a){return new b(a.x-this.w/2,a.y-this.h/2,this.w,this.h)};b.prototype.centeredIn=function(a){return this.centeredAt(a.center())};return b}();E=function(b,a,c){return new B(b.x+(a.x-b.x)*c,b.y+(a.y-b.y)*c,b.w+(a.w-b.w)*c,b.h+(a.h-b.h)*c)};D=function(b,a,c){return new p(b.x+(a.x-b.x)*c,b.y+(a.y-b.y)*c)};A=function(){function b(a){this.e=a}b.prototype.getKeycode=function(){return this.e.charCode||
+this.e.keyCode};b.prototype.isRightButton=function(){if(this.e.which)return this.e.which===3;else if(e.button)return this.e.button===2};b.prototype.getPos=function(){if(this.e.pageX||this.e.pageY)return new p(this.e.pageX,this.e.pageY);else if(this.e.clientX||this.e.clientY)return new p(this.e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,this.e.clientY+document.body.scrollTop+document.documentElement.scrollTop)};b.prototype.controlDown=function(){return this.e.ctrlKey};b.prototype.altDown=
+function(){return this.e.altKey};b.prototype.shiftDown=function(){return this.e.shiftKey};b.prototype.metaDown=function(){return this.e.metaKey};b.prototype.stop=function(){if(this.e.stopPropagation)this.e.stopPropagation();else this.e.cancelBubble=true;return this.e.preventDefault?this.e.preventDefault():(this.e.returnValue=false)};return b}();o=function(){function b(){var a,c,d,f,g,h,j,i,k;a=arguments[0];c=2<=arguments.length?q.call(arguments,1):[];this._=g=document.createElement(a);h=0;for(i=c.length;h<
+i;h++){a=c[h];if(typeof a==="string")g.className=a;else if(a instanceof Array){j=0;for(k=a.length;j<k;j++){f=a[j];typeof f==="string"?g.appendChild(document.createTextNode(f)):g.appendChild(f._)}}else for(d in a)if(n.call(a,d))g[d]=""+a[d]}}b.prototype.appendChildren=function(a){var c,d,f,g;g=[];d=0;for(f=a.length;d<f;d++){c=a[d];g.push(this.appendChild(c))}return g};b.prototype.appendChild=function(a){return this._.appendChild(a._)};b.prototype.removeChildren=function(){var a,c;a=this._.lastChild;
+for(c=[];a;){this._.removeChild(a);c.push(a=this._.lastChild)}return c};b.prototype.setChildren=function(a){var c,d,f,g;this.removeChildren();g=[];d=0;for(f=a.length;d<f;d++){c=a[d];g.push(this.appendChild(c))}return g};b.prototype.setChild=function(a){return this.setChildren([a])};b.prototype.prependChild=function(a){this._.childNodes.length===0&&this._.appendChild(a._);return this._.insertBefore(a._,this._.firstChild)};b.prototype.insertBefore=function(a,c){return this._.insertBefore(a._,c._)};
+b.prototype.appendToBody=function(){return document.body.appendChild(this._)};b.prototype.appendToHead=function(){return document.getElementsByTagName("head")[0].appendChild(this._)};b.prototype.appendTo=function(a){return a._.appendChild(this._)};b.prototype.prependTo=function(a){return a.prependChild(this)};b.prototype.remove=function(){var a;return(a=this._.parentNode)!=null?a.removeChild(this._):void 0};b.prototype.setTextChild=function(a){this.removeChildren();return this._.appendChild(document.createTextNode(a))};
+b.prototype.setOpacity=function(a){var c;c=Math.round(100*a);return this.setStyles({opacity:a,filter:"alpha(opacity="+c+")","-ms-filter":"progid:DXImageTransform.Microsoft.Alpha(opacity="+c+")"})};b.prototype.setStyles=function(a){var c,d,f;f=[];for(c in a)if(n.call(a,c)){d=a[c];f.push(this._.style[c]=d)}return f};b.prototype.setPos=function(a){return this.setStyles({left:Math.round(a.x),top:Math.round(a.y)})};b.prototype.setRect=function(a){return this.setStyles({left:Math.round(a.x)+"px",top:Math.round(a.y)+
+"px",width:Math.round(a.w)+"px",height:Math.round(a.h)+"px"})};b.prototype.on=function(a,c){return this._["on"+a]=function(d){return c(new A(d))}};b.prototype.setClasses=function(a){return this._.className=a.join(" ")};b.prototype.getClasses=function(){return this._.className?this._.className.split(" "):[]};b.prototype.addClass=function(a){var c;c=this.getClasses();if(c.indexOf(a)===-1){c.push(a);return this.setClasses(c)}};b.prototype.removeClass=function(a){var c;c=this.getClasses();a=c.indexOf(a);
+if(a!==-1){c.splice(a,1);return this.setClasses(c)}};b.prototype.getValue=function(){return this._.value};b.prototype.setValue=function(a){return this._.value=a};b.prototype.scrollToBottom=function(){return this._.scrollTop=this._.scrollHeight-this._.clientHeight};return b}();m=function(){var b;b=1<=arguments.length?q.call(arguments,0):[];return function(a,c,d){d.prototype=a.prototype;d=new d;a=a.apply(d,c);return typeof a==="object"?a:d}(o,b,function(){})};s=function(){var b;b=1<=arguments.length?
+q.call(arguments,0):[];return function(a,c,d){d.prototype=a.prototype;d=new d;a=a.apply(d,c);return typeof a==="object"?a:d}(o,["div"].concat(q.call(b)),function(){})};(function(){function b(){var a,c,d,f,g,h,j,i=this;g=arguments[0];a=2<=arguments.length?q.call(arguments,1):[];if(typeof g==="string"){d="whole";c="Button "+g}else if(g.lmr){d="lmr";c="Button "+g.lmr}b.__super__.constructor.call(this,"a",c,[this.overlay=m("div","Boverlay")]);d==="lmr"&&this.appendChildren([m("table",[m("tr",[m("td",
+"BLR BL"),m("td","BM",[" "]),m("td","BLR BR")])])]);this.on("click",function(k){return i.click(k)});f=null;c={};h=0;for(j=a.length;h<j;h++){g=a[h];d=typeof g;if(d==="string")f=g;else if(d==="function")this.onclick=g;else _.extend(c,g)}if(c.id)this._.id=c.id;if(f)this.overlay.appendChild(this.label=s("Blabel",[f]))}y(b,o);b.prototype.setText=function(a){return this.label.setTextChild(a)};b.prototype.click=function(a){a&&a.stop();if(this.onclick)return this.onclick(a)};b.prototype.showLoader=function(){};
+b.prototype.hideLoader=function(){};return b})();u=function(b){return b<16?"0"+b.toString(16):b.toString(16)};x=function(b){return[parseInt(b.substr(1,2),16),parseInt(b.substr(3,2),16),parseInt(b.substr(5,2),16)]};F=function(b,a,c){return"#"+u(b)+u(a)+u(c)};w=function(b,a,c){var d,f,g,h;d=x(b);g=d[0];b=d[1];d=d[2];f=x(a);h=f[0];a=f[1];f=f[2];return F(Math.round(g+(h-g)*c),Math.round(b+(a-b)*c),Math.round(d+(f-d)*c))};C=function(){function b(a,c,d){var f=this;this.duration=a;this.transition=c;this.f=
+d;this.start=(new Date).getTime();this.f(0);setTimeout(function(){return f.step()},0)}b.prototype.step=function(){var a,c=this;a=((new Date).getTime()-this.start)/this.duration;if(a>1)a=1;this.f(this.transition(a));if(a<1)return setTimeout(function(){return c.step()},0)};return b}();(function(){return function(b,a){var c,d,f,g,h,j,i,k;d=a.duration;k=a.transition;g=a.oncomplete;h=a.opacity;i=a.rect;j=a.pos;c=a.background;b instanceof Array||(b=[b]);f=0;new C(d,k,function(l){var r,v,G;f++;v=0;for(G=
+b.length;v<G;v++){r=b[v];h&&r.setOpacity(h[0]+(h[1]-h[0])*l);i&&r.setRect(E(i[0],i[1],l));j&&r.setPos(D(j[0],j[1],l));if(c)r._.style.background=w(c[0],c[1],l)}if(l===1&&g)return g({numFrames:f,info:a})})}})();t=function(b){var a,c,d,f;a=typeof b;if(b===null||a==="undefined")return"null";else if(a==="boolean"||a==="number")return b.valueOf();else if(a==="string")return'"'+b.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\n/,"\\n")+'"';else if(b instanceof Array){a=[];d=0;for(f=b.length;d<f;d++){c=
+b[d];a.push(t(c))}return"["+a.join(",")+"]"}else{a=[];for(c in b)if(n.call(b,c)){d=b[c];a.push(t(c)+":"+t(d))}return"{"+a.join(",")+"}"}};var H,I,z,J;n=Object.prototype.hasOwnProperty;y=function(b,a){function c(){this.constructor=b}for(var d in a)if(n.call(a,d))b[d]=a[d];c.prototype=a.prototype;b.prototype=new c;b.__super__=a.prototype;return b};I=function(b,a,c,d){return function(f){return w(b,a,c===d?0.5:(f-c)/(d-c))}};z=function(b){return b.length===1?"0"+b:b};J=function(b){var a,c;a=1900+b.getYear();
+c=z(""+(b.getMonth()+1));b=z(""+b.getDate());return""+a+"-"+c+"-"+b};H=function(){function b(a){var c,d,f,g,h,j,i,k,l;c=a.color;f=a.data;j=a.day_size;k=a.num_weeks;a=a.append_to;b.__super__.constructor.call(this,"div","Calendar");a&&document.getElementById(a).appendChild(this._);i=a=0;for(d=f.length;i<d;i++){h=f[i];h=h[1];if(h>a)a=h}c=I("#FFFFFF",c,0,a);i=j*k+1*(k+1);a=j*7+8;h=s();h.setStyles({width:i+"px",height:a+"px",position:"relative",background:"#999999"});this.appendChild(h);a={};i=new Date;
+g=i.getDay();d=6-(7+g-1)%7;i=new Date(i.getTime()+864E5*d);for(d=g=k-1;g<=0?d<=0:d>=0;g<=0?d++:d--)for(l=6;l>=0;l--){a[J(i)]=""+d+":"+l;i=new Date(i.getTime()-864E5)}i={};for(d=0;0<=k?d<k:d>k;0<=k?d++:d--)for(l=0;l<7;l++){g=s();g.setStyles({width:j+"px",height:j+"px",background:"#FFFFFF",position:"absolute",left:1+(j+1)*d+"px",top:1+(j+1)*l+"px",zIndex:2});i[""+d+":"+l]=g;h.appendChild(g)}j=0;for(k=f.length;j<k;j++){h=f[j];d=h[0];h=h[1];(d=a[d])&&i[d].setStyles({background:c(h)})}}y(b,o);return b}();
+window.Calendar=H})();
diff --git a/src/Todo.hs b/src/Todo.hs
--- a/src/Todo.hs
+++ b/src/Todo.hs
@@ -4,7 +4,9 @@
 import Data.List.Split
 import Control.Monad.IO.Class
 import Data.Time
+import Paths_Villefort
 
+
 data Row = Row { rid :: Int,
                  title :: String,
                  description :: String,
@@ -73,7 +75,8 @@
           
 
 getModal :: IO [[Char]]
-getModal =  path >>= \path -> readFile (path ++ "templates/modal.ts") >>= \rawModal -> return  (Data.List.Split.splitOn "}" rawModal)
+--getModal =  path >>= \path -> readFile (path ++ "templates/modal.ts") >>= \rawModal -> return  (Data.List.Split.splitOn "}" rawModal)
+getModal =  getDataFileName "templates/modal.ts" >>= \path -> readFile path>>= \rawModal -> return  (Data.List.Split.splitOn "}" rawModal)
 
 daysTilDue date = do
   c <- getCurrentTime
@@ -88,7 +91,8 @@
   tasks <-  qetTasks'
   path  <- path 
   modals <- sequence $ Prelude.map genModal'  tasks
-  header <- readFile (path ++ "templates/index.html")
+  path   <- getDataFileName "templates/index.html"
+  header <- readFile path
   let body = Prelude.concat modals
   return (header ++  body)
 
diff --git a/templates/add.html b/templates/add.html
new file mode 100644
--- /dev/null
+++ b/templates/add.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<title>Villefort</title>
+  <meta charset="utf-8">
+	
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='static1.css') }}">
+<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">  
+<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script
+  src="https://code.jquery.com/jquery-1.10.2.min.js"
+  integrity="sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg="
+    crossorigin="anonymous"></script>
+  <style>
+     .page {
+    padding-left:20%;
+     }
+  </style>
+
+<div class="page">
+  <h1>Villefort</h1>
+ 
+   
+    <div align="left">
+      <div class="btn-group">
+	<div class="dropdown pull-left ">
+       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Todo 
+	 <span id="i1" class="caret"></span></button>
+       <ul class="dropdown-menu">
+	 <li><a href="/">Home</a></li>
+	 <li><a href="/new">New</a></li>
+	 <li><a href="/stat"> Log </a> </li>
+       </ul>
+     </div>
+    </div>
+    </div>  
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
+   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
+    <script>
+  $(document).ready(function() {
+    $("#due").datepicker();
+  });
+  </script>
+  
+<h2>New TODO</h2>
+    <form action="/add" method="post" class="add-entry">
+      <dl>
+	<dt>Title:
+	<dd><input type="text" size="40" name="summary">
+        <dt>Description:
+          <dd><input type="text" size="40" name="title">
+	    <dt>Subjects: </br>
+	    <dd><input type="radio" name='subject' class="what"value="Hellow"> New Subject </br>
+		<textarea id="textarea"></textarea>
+		 <script>
+    var oldVal = "";
+$("#textarea").on("change keyup paste", function() {
+    //action to be performed on textarea changed
+   // alert("changed!");
+    var text = $("#textarea").val();
+    $(".what").val(text);
+
+});
+  </script>
+	  ?
+	  <dt>Date:
+	  <dd><input name="date" id="due" size="40">
+	  <dd><input type="image" name="asd" value="Make new todo">
+      </dl>
+    </form>
+</html>
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<title>Villefort</title>
+  <meta charset="utf-8">
+	
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="shortcut icon" href="/static/favicon.ico">  
+<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <style>
+    .todo {
+    padding-left:20%;
+    }
+    h1 {
+    padding-left:20%;
+    }
+    /*
+    .btn-due7{
+    background: #750787;
+    color: #ffffff;
+    }
+    .btn-due6{
+    background: #750787;
+    color: #ffffff;
+    }
+    .btn-due5{
+background: #008026;
+    color: #ffffff;
+    }
+    .btn-due4{
+background: #004DFF;
+    color: #ffffff;
+    }
+    .btn-due3{
+background: #008026;
+    color: #ffffff;
+    }
+    .btn-due2{
+background: #FFED00;
+    color: #ffffff;
+    }
+    .btn-due1{
+background: #FF8C00;
+    color: #ffffff;
+    }
+    .btn-due0{
+    background: #E40303;
+    color: #ffffff;
+    }
+    */
+  .btn-due11{ background: #3F51B5; color: #ffffff;}.btn-due10{ background: #E8EAF6; color: #ffffff;}.btn-due9{ background: #C5CAE9; color: #ffffff;}.btn-due8{ background: #9FA8DA; color: #ffffff;}.btn-due7{ background: #7986CB; color: #ffffff;}.btn-due6{ background: #5C6BC0; color: #ffffff;}.btn-due5{ background: #3F51B5; color: #ffffff;}.btn-due4{ background: #3949AB; color: #ffffff;}.btn-due3{ background: #303F9F; color: #ffffff;}.btn-due2{ background: #283593; color: #ffffff;}.btn-due1{ background: #1A237E; color: #ffffff;}
+    /*
+    .btn-due7{
+    background: #311B92;
+    color: #ffffff;
+    }
+    .btn-due6{
+    background: #750787;
+    color: #ffffff;
+    }
+    .btn-due5{
+background: #008026;
+    color: #ffffff;
+    }
+    .btn-due4{
+background: #004DFF;
+    color: #ffffff;
+    }
+    .btn-due3{ 
+background: #008026;
+    color: #ffffff;
+    }
+    .btn-due2{
+background: #FFED00;
+    color: #ffffff;
+    }
+    .btn-due1{
+background: #FF8C00;
+    color: #ffffff;
+    }
+    .btn-due0{
+    background: #311B92;
+    color: #ffffff;
+    }
+    */
+    </style>
+
+<div class="page">
+  <h1>Villefort</h1>
+ 
+     
+  <div class ="todo">
+    <div align="left">
+      <div class="btn-group">
+	<div class="dropdown pull-left ">
+       <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Todo 
+	 <span id="i1" class="caret"></span></button>
+       <ul class="dropdown-menu">
+	 <li><a href="/">Home</a></li>
+	 <li><a href="/new">New</a></li>
+	 <li><a href="/stat"> Log </a> </li>
+       </ul>
+	</div>
+		
+    </div>
+    </div>
+
+    </br>
+   
diff --git a/templates/modal.ts b/templates/modal.ts
new file mode 100644
--- /dev/null
+++ b/templates/modal.ts
@@ -0,0 +1,36 @@
+<div class="buttonl"> 
+ <button type="button" class="btn btn-info } btn-lg" data-toggle="modal" data-target="#myModal}"> } </button>
+</div>
+  <!-- Modal -->
+  <div class="modal fade" id="myModal}" role="dialog">
+    <div class="modal-dialog">
+
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title"> } </h4>
+        </div>
+        <div class="modal-body">
+          <p> } </p>
+        </div>
+        <div class="modal-footer">
+	<form class="pull-left" action="}" method="post" class="add-entry">
+      <dl>
+        <dd><button type="submit" class="btn btn-success pull-left" >Finished</button>
+       &nbsp;	Time <input type="text" name="time" value="}">  <br>
+          <input type="hidden" class="pull-left" name="id" value="}">
+	  <button type="submit" formaction="/update">update</button>
+      </dl>
+	</form>
+
+	 <button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
+	</div>
+
+      </div>
+
+    </div>
+  </div>
+
+
+
diff --git a/templates/test.html b/templates/test.html
new file mode 100644
--- /dev/null
+++ b/templates/test.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <script
+  src="https://code.jquery.com/jquery-1.10.2.min.js"
+  integrity="sha256-C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg="
+    crossorigin="anonymous"></script>
+ 
+  <input type="radio" class="what"value="Hellow"> New Subject </br>
+  <textarea id="textarea"></textarea>
+  
+   <script>
+    var oldVal = "";
+$("#textarea").on("change keyup paste", function() {
+    //action to be performed on textarea changed
+   // alert("changed!");
+    var text = $("#textarea").val();
+    $(".what").val(text);
+
+});
+  </script>
+</html>
