diff --git a/Makefile b/Makefile
index 9612de36..988f8c56 100644
--- a/Makefile
+++ b/Makefile
@@ -15,7 +15,7 @@ src/Yavsc/bin/output/wwwroot:
 test:
 	dotnet test
 
-web:
+watch:
 	dotnet watch -p:Configuration=$(CONFIG) --project src/Yavsc/Yavsc.csproj
 
 src/Yavsc.Abstract/bin/$(CONFIG)/$(FRAMEWORK)/Yavsc.Abstract.dll:
diff --git a/src/Yavsc/Views/Blogspot/Details.cshtml b/src/Yavsc/Views/Blogspot/Details.cshtml
index d8d46e5f..53158a7c 100644
--- a/src/Yavsc/Views/Blogspot/Details.cshtml
+++ b/src/Yavsc/Views/Blogspot/Details.cshtml
@@ -63,7 +63,7 @@ $('#commentValidation').html(
 
     <div class="post">
         <div class="float-left">
- <img alt="" src="@Model.Photo" >
+            <img class="photo" src="@Model.Photo" >
         </div>
        
         <h1 ismarkdown>@Model.Title</h1>
diff --git a/src/Yavsc/Views/Blogspot/Index.cshtml b/src/Yavsc/Views/Blogspot/Index.cshtml
index 5948305a..1ee0766f 100644
--- a/src/Yavsc/Views/Blogspot/Index.cshtml
+++ b/src/Yavsc/Views/Blogspot/Index.cshtml
@@ -44,19 +44,17 @@
 </p>
 }
      
-<div class="blog">
+<div class="blog-index">
 @{
     int maxTextLen = 75;
   foreach (var post in Model) {
-    <div class="post">
+    <div class="post card">
     
 
-        <div class="float-left" >
-        <a asp-action="Details" asp-route-id="@post.Id" class="bloglink" style="display: float-left;">
-            <img src="@post.Photo" >
+        <a asp-action="Details" asp-route-id="@post.Id" class="bloglink" >
+            <div class="float-left"><img class="photo card-photo" src="@post.Photo" ></div>
+            <h3 class="index-post-title">@post.Title</h3>
         </a>
-        </div>
-        <h3>@post.Title</h3>
         <div>
           <a asp-action="Details" asp-route-id="@post.Id">
             <asciidoc summary="@maxTextLen">@post.Content</asciidoc></a>
diff --git a/src/Yavsc/wwwroot/css/.sass-cache/f72b97d2a2f775ae72a70903abdc00c6553756a7/site.scssc b/src/Yavsc/wwwroot/css/.sass-cache/f72b97d2a2f775ae72a70903abdc00c6553756a7/site.scssc
index 619b3ac3..30ca9007 100644
Binary files a/src/Yavsc/wwwroot/css/.sass-cache/f72b97d2a2f775ae72a70903abdc00c6553756a7/site.scssc and b/src/Yavsc/wwwroot/css/.sass-cache/f72b97d2a2f775ae72a70903abdc00c6553756a7/site.scssc differ
diff --git a/src/Yavsc/wwwroot/css/site.css b/src/Yavsc/wwwroot/css/site.css
index fc00b7f9..b98719c6 100644
--- a/src/Yavsc/wwwroot/css/site.css
+++ b/src/Yavsc/wwwroot/css/site.css
@@ -15,7 +15,7 @@
 
 div.carousel-inner > div.item > div.carousel-caption-s {
   margin: .5em;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: #530e6a;
   color: #ffffc8;
   font-weight: bold;
   padding: .5em; }
@@ -30,17 +30,17 @@ input[type='checkbox'] {
   min-height: 1em; }
 
 .container {
-  background-color: #000000d5;
+  background-color: #25131c;
   color: #fff;
   padding: .5em;
   margin: .5em; }
 
 .post {
-  background-color: #000000dd;
+  background-color: #290505;
   color: #d1d1d1;
   padding: 2.3em;
   border-radius: 2em;
-  border: solid #441515a4 2pt; }
+  border: solid #5d7f0ca4 2pt; }
 
 .actiongroup {
   float: right;
@@ -51,8 +51,81 @@ input[type='checkbox'] {
   margin: .5em; }
 
 a {
-  color: aquamarine;
-  background-color: black; }
+  color: var(--blue); }
 
 a.close {
   cursor: pointer; }
+
+.grants-page .card {
+  margin-top: 20px;
+  border-bottom: 1px solid lightgray; }
+
+.grants-page .card .card-title {
+  font-size: 120%;
+  font-weight: bold; }
+
+.grants-page .card .card-title img {
+  width: 100px;
+  height: 100px; }
+
+.grants-page .card label {
+  font-weight: bold; }
+
+.navbar-dark .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
+
+div.carousel-inner > div.item > div.carousel-caption-s {
+  margin: .5em;
+  background-color: #530e6a;
+  color: #ffffc8;
+  font-weight: bold;
+  padding: .5em; }
+
+img.blogphoto {
+  max-width: 100%;
+  max-height: 100%; }
+
+input[type='checkbox'] {
+  appearance: auto;
+  min-width: 1em;
+  min-height: 1em; }
+
+.container {
+  background-color: #25131c;
+  color: #ccdeff;
+  padding: .5em;
+  margin: .5em; }
+
+.post {
+  background-color: #290505;
+  color: #dce1ec;
+  padding: .7em;
+  border-radius: 2em;
+  border: solid #b29e9e 2pt; }
+  .post .photo {
+    max-height: 100%;
+    max-width: 100%; }
+
+.actiongroup {
+  float: right;
+  margin: .5em; }
+
+.float-left {
+  float: left;
+  margin: .5em; }
+
+body {
+  font: 1rem/1.5 var(--font-family-sans-serif);
+  color: #ccdeff;
+  background-color: #25131c; }
+
+.card {
+  max-height: 20em;
+  max-width: 30em;
+  display: inline-table; }
+  .card .card-photo {
+    border: solid 1px #ffffffd4;
+    max-height: 15em;
+    max-width: 30em; }
+  .card .index-post-title {
+    display: inline; }
diff --git a/src/Yavsc/wwwroot/css/site.min.css b/src/Yavsc/wwwroot/css/site.min.css
index a35d964e..514269ff 100644
--- a/src/Yavsc/wwwroot/css/site.min.css
+++ b/src/Yavsc/wwwroot/css/site.min.css
@@ -1,6 +1,10 @@
 .grants-page.card{margin-top:20px;border-bottom:1px solid lightgray;}.grants-page.card.card-title{font-size:120%;font-weight:bold;}.grants-page.card.card-title img{width:100px;height:100px;}.grants-page.card label{font-weight:bold;}.navbar-dark.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
-div.carousel-inner>div.item>div.carousel-caption-s{margin:.5em;background-color:rgba(0,0,0,0.6);color:#ffffc8;font-weight:bold;padding:.5em;}
+div.carousel-inner>div.item>div.carousel-caption-s{margin:.5em;background-color:#530e6a;color:#ffffc8;font-weight:bold;padding:.5em;}
 img.blogphoto{max-width:100%;max-height:100%;}
-input[type='checkbox']{appearance:auto;min-width:1em;min-height:1em;}.container{background-color:#000000d5;color:#fff;padding:.5em;margin:.5em;}.post{background-color:#000000dd;color:#d1d1d1;padding:2.3em;border-radius:2em;border:solid#441515a4 2pt;}.actiongroup{float:right;margin:.5em;}.float-left{float:left;margin:.5em;}
-a{color:aquamarine;background-color:black;}
-a.close{cursor:pointer;}
\ No newline at end of file
+input[type='checkbox']{appearance:auto;min-width:1em;min-height:1em;}.container{background-color:#25131c;color:#fff;padding:.5em;margin:.5em;}.post{background-color:#290505;color:#d1d1d1;padding:2.3em;border-radius:2em;border:solid#5d7f0ca4 2pt;}.actiongroup{float:right;margin:.5em;}.float-left{float:left;margin:.5em;}
+a{color:var(--blue);}
+a.close{cursor:pointer;}.grants-page.card{margin-top:20px;border-bottom:1px solid lightgray;}.grants-page.card.card-title{font-size:120%;font-weight:bold;}.grants-page.card.card-title img{width:100px;height:100px;}.grants-page.card label{font-weight:bold;}.navbar-dark.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
+div.carousel-inner>div.item>div.carousel-caption-s{margin:.5em;background-color:#530e6a;color:#ffffc8;font-weight:bold;padding:.5em;}
+img.blogphoto{max-width:100%;max-height:100%;}
+input[type='checkbox']{appearance:auto;min-width:1em;min-height:1em;}.container{background-color:#25131c;color:#ccdeff;padding:.5em;margin:.5em;}.post{background-color:#290505;color:#dce1ec;padding:.7em;border-radius:2em;border:solid#b29e9e 2pt;}.post.photo{max-height:100%;max-width:100%;}.actiongroup{float:right;margin:.5em;}.float-left{float:left;margin:.5em;}
+body{font:1rem/1.5 var(--font-family-sans-serif);color:#ccdeff;background-color:#25131c;}.card{max-height:20em;max-width:30em;display:inline-table;}.card.card-photo{border:solid 1px#ffffffd4;max-height:15em;max-width:30em;}.card.index-post-title{display:inline;}
\ No newline at end of file
diff --git a/src/Yavsc/wwwroot/css/site.scss b/src/Yavsc/wwwroot/css/site.scss
index 78277a8a..f9799667 100644
--- a/src/Yavsc/wwwroot/css/site.scss
+++ b/src/Yavsc/wwwroot/css/site.scss
@@ -1,9 +1,19 @@
-
+$color: #ccdeff;
+$background-color: #25131c;
+$post-color: #dce1ec;
+$post-background-color: #290505;
+$post-border-color:rgb(178, 158, 158);
+$card-border-color: lightgray;
+$card-photo-border-color: #ffffffd4;
+$carousel-color: rgb(255,255,200);
+$carousel-background-color: #530e6a;
+$primary: #00c40d;
+$danger: #dc0505d5;
 
 .grants-page {
   .card {
     margin-top: 20px;
-    border-bottom: 1px solid lightgray;
+    border-bottom: 1px solid $card-border-color;
 
     .card-title {
       img {
@@ -27,8 +37,8 @@
 
 div.carousel-inner > div.item > div.carousel-caption-s {
   margin: .5em;
-  background-color: rgba(0,0,0,.6);
-  color: rgb(255,255,200);
+  background-color: $carousel-background-color;
+  color: $carousel-color;
   font-weight: bold;
   padding: .5em;
 }
@@ -45,18 +55,18 @@ input[type='checkbox'] {
 }
 
 .container {
-  background-color: #000000d5;
+  background-color: $background-color;
   color: #fff;
   padding: .5em;
   margin: .5em;
 }
 
 .post {
-  background-color: #000000dd;
+  background-color: $post-background-color;
   color:#d1d1d1;
   padding: 2.3em;
   border-radius: 2em;
-  border: solid #441515a4 2pt;
+  border: solid #5d7f0ca4 2pt;
 } 
 
 .actiongroup
@@ -71,12 +81,96 @@ input[type='checkbox'] {
   margin:.5em;
 }
 
+
+
 a {
-  color:aquamarine;
-  background-color: black;
+  color: var(--blue);
 }
 
 a.close
 {
   cursor: pointer;
 }
+
+.grants-page .card {
+  margin-top: 20px;
+  border-bottom: 1px solid lightgray; }
+  .grants-page .card .card-title {
+    font-size: 120%;
+    font-weight: bold; }
+    .grants-page .card .card-title img {
+      width: 100px;
+      height: 100px; }
+
+  .grants-page .card label {
+    font-weight: bold; }
+
+.navbar-dark .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
+
+div.carousel-inner > div.item > div.carousel-caption-s {
+  margin: .5em;
+  background-color: $carousel-background-color;
+  color: $carousel-color;
+  font-weight: bold;
+  padding: .5em; }
+
+img.blogphoto {
+  max-width: 100%;
+  max-height: 100%; }
+
+input[type='checkbox'] {
+  appearance: auto;
+  min-width: 1em;
+  min-height: 1em; }
+
+.container {
+  background-color: $background-color;
+  color: $color;
+  padding: .5em;
+  margin: .5em; }
+
+.post {
+  background-color: $post-background-color;
+  color: $post-color;
+  padding: .7em;
+  border-radius: 2em;
+  border: solid $post-border-color 2pt; 
+  .photo {
+    max-height: 100%;
+    max-width: 100%;
+  }
+}
+
+.actiongroup {
+  float: right;
+  margin: .5em; }
+
+.float-left {
+  float: left;
+  margin: .5em; }
+
+  body {
+    font: 1rem/1.5 var(--font-family-sans-serif);
+    color: $color;
+    background-color: $background-color;
+
+  }
+
+  .card {
+    max-height: 20em;
+    max-width: 30em;
+    display: inline-table;
+
+
+  .card-photo
+  {
+    border: solid 1px $card-photo-border-color;
+    max-height: 15em;
+    max-width: 30em;
+  }
+  .index-post-title
+  {
+    display: inline;
+  }
+  }