diff --git a/ui/new/index.jsp b/ui/new/index.jsp
index 93fa2b84844..98d89948978 100644
--- a/ui/new/index.jsp
+++ b/ui/new/index.jsp
@@ -39,6 +39,8 @@
     <script type="text/javascript" src="scripts/cloud.core.account.js"></script>
     
     <script type="text/javascript" src="scripts/cloud.core.volume.js"></script>
+    
+    <script type="text/javascript" src="scripts/cloud.core.snapshot.js"></script>
   
     <title>Cloud.com CloudStack</title>
 </head>
diff --git a/ui/new/jsp/tab_alert.jsp b/ui/new/jsp/tab_alert.jsp
index 5d388aa4b7c..bcaef0bf2d1 100644
--- a/ui/new/jsp/tab_alert.jsp
+++ b/ui/new/jsp/tab_alert.jsp
@@ -1,5 +1,5 @@
 <!--
-<script type="text/javascript" src="scripts/cloud.core.event.js"></script>
+<script type="text/javascript" src="scripts/cloud.core.alert.js"></script>
 -->
 
 <%@ page import="java.util.*" %>
diff --git a/ui/new/jsp/tab_snapshot.jsp b/ui/new/jsp/tab_snapshot.jsp
new file mode 100644
index 00000000000..ea5aa04fede
--- /dev/null
+++ b/ui/new/jsp/tab_snapshot.jsp
@@ -0,0 +1,96 @@
+<!--
+<script type="text/javascript" src="scripts/cloud.core.snapshot.js"></script>
+-->
+
+<%@ page import="java.util.*" %>
+<%@ page import="com.cloud.utils.*" %>
+
+<%
+
+    Locale browserLocale = request.getLocale();
+    CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
+%>
+
+<!-- snapshot detail panel (begin) -->
+<div class="contentbox" id="right_panel_content">
+    <div class="info_detailbox errorbox" id="after_action_info_container" style="display:none">
+        <p id="after_action_info"></p>
+    </div>
+    <div class="tabbox" style="margin-top:15px;">
+        <div class="content_tabs on">
+            <%=t.t("Details")%></div>        
+    </div>
+    <div class="grid_container">
+        <div class="grid_rows odd">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("ID")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="id">
+                </div>
+            </div>
+        </div>
+        <div class="grid_rows even">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("Name")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="name">
+                    </div>
+            </div>
+        </div>
+        <div class="grid_rows odd">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("Volume")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="volume_name">
+                </div>
+            </div>
+        </div>
+        <div class="grid_rows even">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("Interval.Type")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="interval_type">
+                </div>
+            </div>
+        </div>
+        <div class="grid_rows odd">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("Created")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="created">
+                </div>
+            </div>
+        </div>
+        <div class="grid_rows even">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("Account")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="account">
+                </div>
+            </div>
+        </div>
+        <div class="grid_rows odd">
+            <div class="grid_row_cell" style="width: 20%;">
+                <div class="row_celltitles">
+                    <%=t.t("Domain")%>:</div>
+            </div>
+            <div class="grid_row_cell" style="width: 79%;">
+                <div class="row_celltitles" id="domain">
+                </div>
+            </div>
+        </div>       
+    </div>
+</div>
+<!-- snapshot detail panel (end) -->
\ No newline at end of file
diff --git a/ui/new/scripts/cloud.core.init.js b/ui/new/scripts/cloud.core.init.js
index b6203176cef..c3f9a1ffb10 100755
--- a/ui/new/scripts/cloud.core.init.js
+++ b/ui/new/scripts/cloud.core.init.js
@@ -94,6 +94,7 @@ $(document).ready(function() {
     listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "description", "jsp/tab_alert.jsp", loadAlertToRigntPanelFn);
     listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "name", "jsp/tab_account.jsp", loadAccountToRigntPanelFn);
     listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "name", "jsp/tab_volume.jsp", loadVolumeToRigntPanelFn);
+    listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "name", "jsp/tab_snapshot.jsp", loadSnapshotToRigntPanelFn);
     
     
     
diff --git a/ui/new/scripts/cloud.core.snapshot.js b/ui/new/scripts/cloud.core.snapshot.js
new file mode 100644
index 00000000000..279d38b0d95
--- /dev/null
+++ b/ui/new/scripts/cloud.core.snapshot.js
@@ -0,0 +1,14 @@
+function loadSnapshotToRigntPanelFn($rightPanelContent) {   
+    var jsonObj = $rightPanelContent.data("jsonObj");
+    
+    var $rightPanelContent = $("#right_panel_content");
+    
+    $rightPanelContent.find("#id").text(jsonObj.id);
+    $rightPanelContent.find("#name").text(jsonObj.name);
+    $rightPanelContent.find("#volume_name").text(jsonObj.volumename);
+    $rightPanelContent.find("#interval_type").text(jsonObj.intervaltype);
+    $rightPanelContent.find("#account").text(jsonObj.account);
+    $rightPanelContent.find("#domain").text(jsonObj.domain);   
+    
+    setDateField(jsonObj.created, $rightPanelContent.find("#created"));	
+}
\ No newline at end of file