diff --git a/covfee/client/input/annotation_type_dropdown.tsx b/covfee/client/input/annotation_type_dropdown.tsx
new file mode 100644
index 00000000..9acb3938
--- /dev/null
+++ b/covfee/client/input/annotation_type_dropdown.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { DownOutlined } from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import { Dropdown, Menu, Space, MenuInfo } from "antd";
+
+interface AnnotationTypeDropdownProps {
+  annotation_types: string[];
+  itemClick: (item: string) => void;
+  selected_annotation: string;
+}
+
+export const AnnotationTypeDropdown: React.FC<AnnotationTypeDropdownProps> = ({
+  annotation_types,
+  itemClick,
+  selected_annotation,
+}) => {
+  console.log("Selected annotation:" + selected_annotation);
+  const items: MenuProps["items"] = [
+    {
+      key: "1",
+      type: "group",
+      label: "Action Annotations",
+      children: annotation_types.map((annotation_type) => ({
+        key: annotation_type,
+        label: annotation_type,
+        onClick: (item: MenuInfo) => {
+          itemClick(item.key);
+        },
+      })),
+    },
+  ];
+
+  return (
+    <Dropdown menu={{ items }}>
+      <a
+        onClick={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <Space>
+          {selected_annotation}
+          <DownOutlined />
+        </Space>
+      </a>
+    </Dropdown>
+  );
+};
+
+export default AnnotationTypeDropdown;
diff --git a/covfee/client/tasks/action_annotation/action_annotation.module.css b/covfee/client/tasks/action_annotation/action_annotation.module.css
new file mode 100644
index 00000000..3383af65
--- /dev/null
+++ b/covfee/client/tasks/action_annotation/action_annotation.module.css
@@ -0,0 +1,31 @@
+.action-annotation-task {
+    text-align: center;
+    font-size: calc(10px + 2vmin);
+    display: flex;
+  }
+
+  .sidebar {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    width: 20%; /* Adjust as needed */
+    min-width: 200px; /* Set a minimum width */
+    background-color: #f0f0f0; /* Example background color */
+  }
+  
+  .main-content {
+    background-color: #ffffff; /* Example background color */
+    width: 80%;
+    flex-direction: column;
+  }
+  
+  .videoPlayer{
+    width: 50%;
+  }
+
+  .dropdown{
+    background-color: red;
+  }
\ No newline at end of file
diff --git a/covfee/client/tasks/action_annotation/index.tsx b/covfee/client/tasks/action_annotation/index.tsx
index c98b698f..17a41042 100644
--- a/covfee/client/tasks/action_annotation/index.tsx
+++ b/covfee/client/tasks/action_annotation/index.tsx
@@ -7,9 +7,14 @@ import { AllPropsRequired } from "../../types/utils";
 import { useDispatch } from "../../journey/state";
 import { useSelector } from "react-redux";
 import VideojsPlayer from "../../players/videojs";
+import AnnotationTypeDropdown from "../../input/annotation_type_dropdown";
+import { MenuProps } from "antd";
+import styles from "./action_annotation.module.css";
 
 interface Props extends CovfeeTaskProps<ActionAnnotationTaskSpec> {}
 
+const annotation_types: string[] = ["speaking", "laughing"];
+
 const ActionAnnotationTask: React.FC<Props> = (props) => {
   // here we set the defaults for the task props
   // we could use useMemo to avoid recomputing on every render
@@ -42,38 +47,47 @@ const ActionAnnotationTask: React.FC<Props> = (props) => {
   // and we render the component
   return (
     <form>
-      <style jsx>{`
-        button:disabled {
-          background-color: darkorange;
-        }
-      `}</style>
-      <div>
-        <button
-          id="speaking"
-          value="speaking"
-          onClick={() => dispatch(actions.setActiveAnnotation("speaking"))}
-          disabled={active_annotation == "speaking"}
-        >
-          Speaking
-        </button>
-      </div>
-      <div>
-        <button
-          id="laughing"
-          value="laughing"
-          onClick={() => {
-            dispatch(actions.setActiveAnnotation("laughing"));
-          }}
-          disabled={active_annotation == "laughing"}
-        >
-          Laughing
-        </button>
+      <div className={styles.action_annotation_task}>
+        <div className={styles.sidebar}>
+          <AnnotationTypeDropdown
+            annotation_types={annotation_types}
+            itemClick={(item_key: string) =>
+              dispatch(actions.setActiveAnnotation(item_key))
+            }
+            selected_annotation={active_annotation}
+          />
+          <div>
+            <button
+              id="speaking"
+              value="speaking"
+              onClick={() => dispatch(actions.setActiveAnnotation("speaking"))}
+              disabled={active_annotation == "speaking"}
+            >
+              Speaking
+            </button>
+          </div>
+          <div>
+            <button
+              id="laughing"
+              value="laughing"
+              onClick={() => {
+                dispatch(actions.setActiveAnnotation("laughing"));
+              }}
+              disabled={active_annotation == "laughing"}
+            >
+              Laughing
+            </button>
+          </div>
+        </div>
+        <div className={styles.main_content}>
+          <VideojsPlayer
+            className={styles.videoPlayer}
+            // {...args.spec.media}
+            {...my_video}
+            // onEnded={actions.enableForm}
+          />
+        </div>
       </div>
-      <VideojsPlayer
-        // {...args.spec.media}
-        {...my_video}
-        // onEnded={actions.enableForm}
-      />
     </form>
   );
 };
diff --git a/samples/action_annotation/action_annotation.py b/samples/action_annotation/action_annotation.py
index 5f446918..4c684045 100644
--- a/samples/action_annotation/action_annotation.py
+++ b/samples/action_annotation/action_annotation.py
@@ -5,9 +5,10 @@
 config.load_environment("local")
 
 my_task_1 = tasks.ActionAnnotationTaskSpec(name="My Task 1", input=None, media=None)
+my_task_2 = tasks.ActionAnnotationTaskSpec(name="My Task 1", input=None, media=None)
 
 hit = HIT("Joint counter")
-j1 = hit.add_journey(nodes=[my_task_1])
+j1 = hit.add_journey(nodes=[my_task_1, my_task_2])
 
 projects = [Project("My Project", email="example@example.com", hits=[hit])]
 app = CovfeeApp(projects)