diff --git a/.gitignore b/.gitignore
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 *~
 log
+tmp
diff --git a/app/views/main/_problem.html.erb b/app/views/main/_problem.html.erb
--- a/app/views/main/_problem.html.erb
+++ b/app/views/main/_problem.html.erb
@@ -1,26 +1,26 @@
-<tr class="info-<%= (problem_counter%2==0) ? "even" : "odd" %>">
-  <td>
-    <%= "#{problem_counter+1}" %>
-  </td>
-  <td>
-    <%= "#{problem.full_name} (#{problem.name})" %>
-    <%= link_to "[#{t 'main.problem_desc'}]", problem.url, :popup => true if (problem.url!=nil) and (problem.url!='') %>
-  </td>
-  <td align="center">
-    <%= @prob_submissions[problem_counter][:count] %>
-  </td>
-  <td>
-    <span id="problem-form-<%= problem.id %>">
-      <% form_tag({:action => 'new_input', :id => problem.id}, :method => :post) do -%>
-	<input type="submit" value="New input"/>
-      <% end -%>
-      <% form_tag({ :action => 'download_input', :id => problem.id }, :method => :post) do -%>
-        <input type="submit" value="Download input"/>
-      <% end -%>
-      <% form_tag({ :action => 'submit_solution', :id => problem.id }, :method => :post, :multipart => true) do -%>
-	<input type="file" name="file">
-	<input type="submit" value="Submit solution"/>
-      <% end -%>
-    </span>
-  </td>
-</tr>
+<div id="problem-panel-<%= problem.id %>" class="problem-panel" style="display:none">
+  <div id="problem-form-<%= problem.id %>" class="problem-form">
+    <% form_tag({:action => 'new_input', :id => problem.id}, :method => :post) do -%>
+      <input type="submit" value="New input"/>
+    <% end -%>
+    <% form_tag({ :action => 'download_input', :id => problem.id }, :method => :post) do -%>
+      <input type="submit" value="Download input"/>
+    <% end -%>
+    <% form_tag({ :action => 'submit_solution', :id => problem.id }, :method => :post, :multipart => true) do -%>
+      <input type="file" name="file">
+      <input type="submit" value="Submit solution"/>
+    <% end -%>
+  </div>
+
+  <div class="problem-description">
+    <% if problem.description!=nil %>
+      <% if problem.description.markdowned %>
+<%= markdown(problem.description.body) %>
+      <% else %>
+<%= problem.description.body %>
+      <% end %>
+    <% else %>
+      (not available)
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/main/_problem_title.html.haml b/app/views/main/_problem_title.html.haml
new file mode 100644
--- /dev/null
+++ b/app/views/main/_problem_title.html.haml
@@ -0,0 +1,8 @@
+.problem-bar{:id => "problem-bar-#{problem.id}"}
+  %a{:href => "#", :onclick => "$$('.problem-panel').each(function(elt) {elt.hide();});  $('problem-panel-#{problem.id}').show(); $('problem-panel-filler').hide(); return false;"}
+    %span{:class => 'problem-title'}
+      = "#{problem.full_name} (#{problem.name})"
+    - if @prob_submissions[problem_title_counter][:count] > 0
+      = "[#{@prob_submissions[problem_title_counter][:count]} trials(s)]"
+    - else
+      [No trials]
diff --git a/app/views/main/list.html.haml b/app/views/main/list.html.haml
--- a/app/views/main/list.html.haml
+++ b/app/views/main/list.html.haml
@@ -11,12 +11,6 @@
     #announcementbox-body
       = render :partial => 'announcement', :collection => @announcements
 
-- if Configuration.show_submitbox_to?(@user)
-  .submitbox
-    = error_messages_for 'submission'
-    = render :partial => 'submission_box'
-
-
 %hr/
 
 - if (Configuration.contest_mode) and (@user.site!=nil)  |
@@ -24,14 +18,16 @@
   %p=t 'main.start_soon'
 
 - if Configuration.show_tasks_to?(@user)
-  %table.info
-    %tr.info-head
-      %th
-      %th Tasks
-      %th # of sub(s)
-      %th Results
+  .problem-list
+    = render :partial => 'problem_title', :collection => @problems, :as => :problem
+  .problem-content
+    %span{:id => "problem-panel-filler"}
+      %b Welcome to Code Jom
+      %br/
+      Choose problems from the list on the right.
     = render :partial => 'problem', :collection => @problems
 
+%br{:clear=>'both'}/
 %hr/
 
 :javascript
diff --git a/public/stylesheets/.gitignore b/public/stylesheets/.gitignore
new file mode 100644
--- /dev/null
+++ b/public/stylesheets/.gitignore
@@ -0,0 +1,2 @@
+.sass-cache
+
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -1,342 +1,266 @@
-/* Main Default */
 body {
-    background: white url(../images/topbg.jpg) repeat-x top center;
-    font-size: 13px;
-    font-family: Tahoma, "sans-serif";
-    margin: 10px;
-    padding: 10px;
-}
+  background: white url(../images/topbg.jpg) repeat-x top center;
+  font-size: 13px;
+  font-family: Tahoma, "sans-serif";
+  margin: 10px;
+  padding: 10px; }
 
-/* Form Font */
 input {
-    font-family: Tahoma, "sans-serif";
-}
+  font-family: Tahoma, "sans-serif"; }
 
-/* Heading 1&2 */
 h1 {
-    font-size: 24px;
-    color: #334488;
-    line-height: 2em;
-}
+  font-size: 24px;
+  color: #334488;
+  line-height: 2em; }
 
 h2 {
-    font-size: 18px;
-    color: #5566bb;
-    line-height: 1.5em;
-}
-
-/* Bar Line Color and Thickness */ 
-hr {
-    border-top: 1px solid #dddddd;
-    border-bottom: 1px solid #eeeeee;
-}
+  font-size: 18px;
+  color: #5566bb;
+  line-height: 1.5em; }
 
-/* Link + Anchor Color */
-a, a:link, a:visited {
-    color: #6666cc;
-    text-decoration: none;
-}
-
-a:hover, a:focus {
-    color: #111166;
-    text-decoration: none;
-}
+hr {
+  border-top: 1px solid #dddddd;
+  border-bottom: 1px solid #eeeeee; }
 
-/* This is the main menu bad*/
-div.userbar { 
-    line-height: 1.5em;
-    text-align: right;
-    font-size: 12px;
-}
+a {
+  color: #6666cc;
+  text-decoration: none; }
+  a:link, a:visited {
+    color: #6666cc;
+    text-decoration: none; }
+  a:hover, a:focus {
+    color: #111166;
+    text-decoration: none; }
 
-/* This is the top bar, displaying user's full name */
-div.title {
-    // background: #ddddff;
-    // border: 1px dashed blue;
-    padding: 10px 0px;
-    line-height: 1.5em;
-    font-size: 13px;
-}
+.userbar {
+  line-height: 1.5em;
+  text-align: right;
+  font-size: 12px; }
 
-div.title span.contest-over-msg {
+.title {
+  padding: 10px 0px;
+  line-height: 1.5em;
+  font-size: 13px; }
+  .title span.contest-over-msg {
     font-size: 15px;
-    color: red;
-}
-
-div.title table {
+    color: red; }
+  .title table {
     width: 100%;
-    font-weight: bold;
-}
-
-div.title td.left-col {
+    font-weight: bold; }
+  .title td.left-col {
     text-align: left;
     vertical-align: top;
-    color: #444444;
-}
-
-div.title td.right-col {
+    color: #444444; }
+  .title td.right-col {
     text-align: right;
     vertical-align: top;
     font-size: 18px;
-    color: #116699;
-}
+    color: #116699; }
 
-/* Standard table with header and rows with alternating background */
 table.info {
-    margin: 10px 0;
-    border: 1px solid #666666;
-    border-collapse: collapse;
-    font-size: 12px;
-}
-
-table.info th {
+  margin: 10px 0;
+  border: 1px solid #666666;
+  border-collapse: collapse;
+  font-size: 12px; }
+  table.info th {
     border: 1px solid #666666;
     line-height: 1.5em;
-    padding: 0 0.5em;
-}
-
-table.info td {
+    padding: 0 0.5em; }
+  table.info td {
     border-left: 1px solid #666666;
     border-right: 1px solid #666666;
     line-height: 1.5em;
-    padding: 0 0.5em;
-}
+    padding: 0 0.5em; }
 
 tr.info-head {
-    background: #777777;
-    color: white;
-}
+  background: #777777;
+  color: white; }
 
 tr.info-odd {
-    background: #eeeeee;
-}
+  background: #eeeeee; }
 
 tr.info-even {
-    background: #f9f9f9;
-}
+  background: #f9f9f9; }
 
-/*******************************
- [Main]
-********************************/
-div.submitbox {
-    background: #eeeeff;
-    border: 1px dotted #99aaee;
-    padding: 5px;
-    margin: 10px 0px;
-    color: black;
-    font-size: 13px;
-}
+.submitbox {
+  background: #eeeeff;
+  border: 1px dotted #99aaee;
+  padding: 5px;
+  margin: 10px 0px;
+  color: black;
+  font-size: 13px; }
 
-div.errorExplanation {
-    border: 1px dotted gray;
-    color: #bb2222;
-    padding: 5px 15px 5px 15px;
-    margin-bottom: 5px;
-    background-color: white;
-    font-weight: normal;
-}
-
-
-div.errorExplanation h2 {
+.errorExplanation {
+  border: 1px dotted gray;
+  color: #bb2222;
+  padding: 5px 15px 5px 15px;
+  margin-bottom: 5px;
+  background-color: white;
+  font-weight: normal; }
+  .errorExplanation h2 {
     color: #cc1111;
-    font-weight: bold;
-}
+    font-weight: bold; }
 
-/*******************************
- [Settings]
-********************************/
 table.uinfo {
-    border-collapse: collapse;
-    border: 1px solid black;
-    font-size: 13px;
-}
+  border-collapse: collapse;
+  border: 1px solid black;
+  font-size: 13px; }
 
 td.uinfo {
-    vertical-align: top;
-    border: 1px solid black;
-    padding: 5px;
-}
+  vertical-align: top;
+  border: 1px solid black;
+  padding: 5px; }
 
 th.uinfo {
-    background: lightgreen;
-    vertical-align: top;
-    text-align: right;
-    border: 1px solid black;
-    padding: 5px;
-}
+  background: lightgreen;
+  vertical-align: top;
+  text-align: right;
+  border: 1px solid black;
+  padding: 5px; }
 
-/*******************************
- [Submission]
-********************************/
-div.compilermsgbody {
-    font-family: monospace;
-}
+.compilermsgbody {
+  font-family: monospace; }
 
-div.task-menu {
-    text-align: center;
-    font-size: 13px;
-    line-height: 1.75em;
-    font-weight: bold;
-    border-top: 1px dashed gray;
-    border-bottom: 1px dashed gray;
-    margin-top: 2px;
-    margin-bottom: 4px;
-}
+.task-menu {
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.75em;
+  font-weight: bold;
+  border-top: 1px dashed gray;
+  border-bottom: 1px dashed gray;
+  margin-top: 2px;
+  margin-bottom: 4px; }
 
-/*******************************
- [Submission]
-********************************/
 table.taskdesc {
-    border: 2px solid #dddddd;
-    border-collapse: collapse;
-    margin: 10px auto;
-    width: 90%;
-    font-size: 13px;
-}
-
-table.taskdesc p {
-    font-size: 13px;
-}
-
-table.taskdesc tr.name {
+  border: 2px solid #dddddd;
+  border-collapse: collapse;
+  margin: 10px auto;
+  width: 90%;
+  font-size: 13px; }
+  table.taskdesc p {
+    font-size: 13px; }
+  table.taskdesc tr.name {
     border: 2px solid #dddddd;
     background: #dddddd;
     color: #333333;
     font-weight: bold;
     font-size: 14px;
     line-height: 1.5em;
-    text-align: center;
-}
-
-table.taskdesc td.desc-odd {
+    text-align: center; }
+  table.taskdesc td.desc-odd {
     padding: 5px;
     padding-left: 20px;
-    background: #fefeee;
-}
-
-table.taskdesc td.desc-even {
+    background: #fefeee; }
+  table.taskdesc td.desc-even {
     padding: 5px;
     padding-left: 20px;
-    background: #feeefe;
-}
-
-/**********************
-   Announcement
-***********************/
+    background: #feeefe; }
 
-div.announcementbox {
-    margin: 10px 0px;
-    background: #bbddee;
-    padding: 1px;
-}
-
-div.announcementbox span.title {
+.announcementbox {
+  margin: 10px 0px;
+  background: #bbddee;
+  padding: 1px; }
+  .announcementbox span.title {
     font-weight: bold;
     color: #224455;
     padding-left: 10px;
-    line-height: 1.6em;
-}
-
-div.announcement {
+    line-height: 1.6em; }
+  .announcementbox .announcement {
     margin: 2px;
     background: white;
     padding: 1px;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 5px;
-    padding-bottom: 5px;
-}
+    padding-bottom: 5px; }
+    .announcementbox .announcement p {
+      font-size: 12px;
+      margin: 2px; }
 
-.announcement p {
-    font-size: 12px;
-    margin: 2px;
-}
-
-div.pub-info, div.pub-info p {
+.pub-info {
+  text-align: right;
+  font-style: italic;
+  font-size: 9px; }
+  .pub-info p {
     text-align: right;
     font-style: italic;
-    font-size: 9px;
-}
+    font-size: 9px; }
 
 .announcement .toggles {
-    font-weight: normal;
-    float: right;
-    font-size: 80%;
-}
-
+  font-weight: normal;
+  float: right;
+  font-size: 80%; }
 .announcement .announcement-title {
-    font-weight: bold;
-}
+  font-weight: bold; }
 
-/******************
-   Messages
-******************/
-
-div.message {
-    margin: 10px 0 0;
-}
-
-div.message div.message {
-    margin: 0 0 0 30px;
-}
-
-div.message div.body {
+.message {
+  margin: 10px 0 0; }
+  .message .message {
+    margin: 0 0 0 30px; }
+    .message .message .stat {
+      font-size: 10px;
+      line-height: 1.75em;
+      padding: 0 5px;
+      color: #444444;
+      background: #bbbbbb;
+      font-weight: bold; }
+  .message .body {
     border: 2px solid #dddddd;
     background: #fff8f8;
-    padding-left: 5px;
-}
-
-div.message div.reply-body {
+    padding-left: 5px; }
+  .message .reply-body {
     border: 2px solid #bbbbbb;
     background: #fffff8;
-    padding-left: 5px;
-}
-
-div.message div.stat {
+    padding-left: 5px; }
+  .message .stat {
     font-size: 10px;
     line-height: 1.75em;
     padding: 0 5px;
     color: #333333;
     background: #dddddd;
-    font-weight: bold;
-}
+    font-weight: bold; }
+
+.contest-title {
+  color: white;
+  text-align: center;
+  line-height: 2em; }
 
-div.message div.message div.stat {
-    font-size: 10px;
-    line-height: 1.75em;
-    padding: 0 5px;
-    color: #444444;
-    background: #bbbbbb;
-    font-weight: bold;
-}
+.registration-desc {
+  border: 1px dotted gray;
+  background: #f5f5f5;
+  padding: 5px;
+  margin: 10px 0;
+  font-size: 12px;
+  line-height: 1.5em; }
 
-/********************
-   Registration
-********************/
-div.contest-title {
-    color: white;
-    text-align: center;
-    line-height: 2em;
-}
+.test-desc {
+  border: 1px dotted gray;
+  background: #f5f5f5;
+  padding: 5px;
+  margin: 10px 0;
+  font-size: 12px;
+  line-height: 1.5em; }
 
-div.registration-desc {
-    border: 1px dotted gray;
-    background: #f5f5f5;
-    padding: 5px;
-    margin: 10px 0;
-    font-size: 12px;
-    line-height: 1.5em;
-}
+.problem-list {
+  width: 200px;
+  float: left; }
+
+.problem-bar {
+  margin-top: 5px;
+  padding: 5px;
+  background: #e0e0e0; }
+  .problem-bar span.problem-title {
+    font-weight: bold;
+    font-size: 110%; }
 
-/********************
-  [Test Interface]
-********************/
+.problem-content {
+  float: left;
+  margin-left: 10px;
+  width: 700px; }
 
-div.test-desc {
-    border: 1px dotted gray; 
-    background: #f5f5f5;
-    padding: 5px;
-    margin: 10px 0;
-    font-size: 12px;
-    line-height: 1.5em;
-}
+.problem-panel {
+  border: 1px black solid;
+  padding: 5px; }
+  .problem-panel .problem-form {
+    border: 1px dotted #99aaee;
+    background: #eeeeff; }
diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass
new file mode 100644
--- /dev/null
+++ b/public/stylesheets/sass/application.sass
@@ -0,0 +1,312 @@
+body
+  background: white url(../images/topbg.jpg) repeat-x top center
+  font-size: 13px
+  font-family: Tahoma, "sans-serif"
+  margin: 10px
+  padding: 10px
+
+
+input
+  font-family: Tahoma, "sans-serif"
+
+
+h1
+  font-size: 24px
+  color: #334488
+  line-height: 2em
+
+
+h2
+  font-size: 18px
+  color: #5566bb
+  line-height: 1.5em
+
+
+hr
+  border-top: 1px solid #dddddd
+  border-bottom: 1px solid #eeeeee
+
+
+a
+  color: #6666cc
+  text-decoration: none
+
+  &:link, &:visited
+    color: #6666cc
+    text-decoration: none
+
+  &:hover, &:focus
+    color: #111166
+    text-decoration: none
+
+
+.userbar
+  line-height: 1.5em
+  text-align: right
+  font-size: 12px
+
+.title
+  padding: 10px 0px
+  line-height: 1.5em
+  font-size: 13px
+
+  span.contest-over-msg
+    font-size: 15px
+    color: red
+
+  table
+    width: 100%
+    font-weight: bold
+
+  td
+    &.left-col
+      text-align: left
+      vertical-align: top
+      color: #444444
+
+    &.right-col
+      text-align: right
+      vertical-align: top
+      font-size: 18px
+      color: #116699
+
+
+table.info
+  margin: 10px 0
+  border: 1px solid #666666
+  border-collapse: collapse
+  font-size: 12px
+
+  th
+    border: 1px solid #666666
+    line-height: 1.5em
+    padding: 0 0.5em
+
+  td
+    border-left: 1px solid #666666
+    border-right: 1px solid #666666
+    line-height: 1.5em
+    padding: 0 0.5em
+
+
+tr.info-head
+  background: #777777
+  color: white
+
+tr.info-odd
+  background: #eeeeee
+
+tr.info-even
+  background: #f9f9f9
+
+
+.submitbox
+  background: #eeeeff
+  border: 1px dotted #99aaee
+  padding: 5px
+  margin: 10px 0px
+  color: black
+  font-size: 13px
+
+.errorExplanation
+  border: 1px dotted gray
+  color: #bb2222
+  padding: 5px 15px 5px 15px
+  margin-bottom: 5px
+  background-color: white
+  font-weight: normal
+
+  h2
+    color: #cc1111
+    font-weight: bold
+
+
+table.uinfo
+  border-collapse: collapse
+  border: 1px solid black
+  font-size: 13px
+
+
+td.uinfo
+  vertical-align: top
+  border: 1px solid black
+  padding: 5px
+
+
+th.uinfo
+  background: lightgreen
+  vertical-align: top
+  text-align: right
+  border: 1px solid black
+  padding: 5px
+
+
+.compilermsgbody
+  font-family: monospace
+
+.task-menu
+  text-align: center
+  font-size: 13px
+  line-height: 1.75em
+  font-weight: bold
+  border-top: 1px dashed gray
+  border-bottom: 1px dashed gray
+  margin-top: 2px
+  margin-bottom: 4px
+
+
+table.taskdesc
+  border: 2px solid #dddddd
+  border-collapse: collapse
+  margin: 10px auto
+  width: 90%
+  font-size: 13px
+
+  p
+    font-size: 13px
+
+  tr.name
+    border: 2px solid #dddddd
+    background: #dddddd
+    color: #333333
+    font-weight: bold
+    font-size: 14px
+    line-height: 1.5em
+    text-align: center
+
+  td
+    &.desc-odd
+      padding: 5px
+      padding-left: 20px
+      background: #fefeee
+
+    &.desc-even
+      padding: 5px
+      padding-left: 20px
+      background: #feeefe
+
+
+.announcementbox
+  margin: 10px 0px
+  background: #bbddee
+  padding: 1px
+
+  span.title
+    font-weight: bold
+    color: #224455
+    padding-left: 10px
+    line-height: 1.6em
+
+  .announcement
+    margin: 2px
+    background: white
+    padding: 1px
+    padding-left: 10px
+    padding-right: 10px
+    padding-top: 5px
+    padding-bottom: 5px
+
+    p
+      font-size: 12px
+      margin: 2px
+
+
+.pub-info
+  text-align: right
+  font-style: italic
+  font-size: 9px
+
+  p
+    text-align: right
+    font-style: italic
+    font-size: 9px
+
+
+.announcement
+  .toggles
+    font-weight: normal
+    float: right
+    font-size: 80%
+
+  .announcement-title
+    font-weight: bold
+
+
+.message
+  margin: 10px 0 0
+
+  .message
+    margin: 0 0 0 30px
+
+    .stat
+      font-size: 10px
+      line-height: 1.75em
+      padding: 0 5px
+      color: #444444
+      background: #bbbbbb
+      font-weight: bold
+
+  .body
+    border: 2px solid #dddddd
+    background: #fff8f8
+    padding-left: 5px
+
+  .reply-body
+    border: 2px solid #bbbbbb
+    background: #fffff8
+    padding-left: 5px
+
+  .stat
+    font-size: 10px
+    line-height: 1.75em
+    padding: 0 5px
+    color: #333333
+    background: #dddddd
+    font-weight: bold
+
+.contest-title
+  color: white
+  text-align: center
+  line-height: 2em
+
+.registration-desc
+  border: 1px dotted gray
+  background: #f5f5f5
+  padding: 5px
+  margin: 10px 0
+  font-size: 12px
+  line-height: 1.5em
+
+.test-desc
+  border: 1px dotted gray
+  background: #f5f5f5
+  padding: 5px
+  margin: 10px 0
+  font-size: 12px
+  line-height: 1.5em
+
+.problem-list
+  width: 200px
+  float: left  
+
+.problem-bar
+  margin-top: 5px
+  padding: 5px
+  background: #e0e0e0
+
+  span.problem-title
+    font-weight: bold
+    font-size: 110%
+
+.problem-content
+  float: left
+  margin-left: 10px
+  width: 700px
+
+.problem-panel
+  border: 1px black solid
+  padding: 5px
+
+  .problem-form
+    border: 1px dotted #99aaee
+    background: #eeeeff