diff --git a/src/components/DragAndDrop.tsx b/src/components/DragAndDrop.tsx
index 2d9ea79..5b8fdf6 100644
--- a/src/components/DragAndDrop.tsx
+++ b/src/components/DragAndDrop.tsx
@@ -15,10 +15,10 @@ export const DragAndDrop: React.FC = () => {
     <DndProvider backend={HTML5Backend}>
       <ElementsProvider>
         <div className={`w-full h-screen flex ${roboto.className}`}>
-          <Sidebar />
           <div className="flex-1">
             <DynamicDropArea />
           </div>
+          <Sidebar />
         </div>
       </ElementsProvider>
     </DndProvider>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 49420af..73263a7 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import { useDrag } from 'react-dnd'
 import { Button } from "@/components/ui/button"
 import { roboto } from '../app/fonts'
 import { useElements } from '../context/ElementsContext'
+import { Input } from "@/components/ui/input"
 
 interface DraggableElementProps {
   type: string
@@ -40,20 +41,41 @@ const DraggableElement: React.FC<DraggableElementProps> = ({ type, content }) =>
 
 export const Sidebar: React.FC = () => {
   const { elements, getElementContent } = useElements()
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredElements = Array.from(elements.values()).filter(element => 
+    getElementContent(element.type).toLowerCase().includes(searchQuery.toLowerCase())
+  )
 
   return (
-    <div className="w-64 h-full bg-gray-100 p-4 overflow-y-auto">
-      <h2 className="text-xl font-bold mb-4">Elements</h2>
-      <div className="flex flex-wrap gap-2">
-        {Array.from(elements.values()).map((element) => (
-          <DraggableElement 
-            key={element.type} 
-            type={element.type} 
-            content={getElementContent(element.type)} 
-          />
-        ))}
+    <div className="w-[350px] h-full flex flex-col fixed top-0 right-0 border-l-2 border-l-rgb(200,200,200)">
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex flex-wrap gap-2">
+          {filteredElements.map((element) => (
+            <DraggableElement 
+              key={element.type} 
+              type={element.type} 
+              content={getElementContent(element.type)} 
+            />
+          ))}
+        </div>
+      </div>
+      <div className="border-t">
+        {/* <div className="flex w-full">
+          <Button variant="ghost" className="w-1/2 rounded-none border-r">
+            Discoveries
+          </Button>
+          <Button variant="ghost" className="w-1/2 rounded-none">
+            Sort by Time
+          </Button>
+        </div> */}
+        <Input 
+          className="w-full px-4 py-3 rounded-none" 
+          placeholder="Search..." 
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
       </div>
     </div>
   )
-}
-
+}
\ No newline at end of file
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..69b64fb
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/context/ElementsContext.tsx b/src/context/ElementsContext.tsx
index 67c9199..84080f8 100644
--- a/src/context/ElementsContext.tsx
+++ b/src/context/ElementsContext.tsx
@@ -20,8 +20,8 @@ export function ElementsProvider({ children }: { children: React.ReactNode }) {
   const [elements, setElements] = useState<Map<string, Element>>(new Map([
     ['water', { type: 'water', emoji: '💧', text: 'Water' }],
     ['fire', { type: 'fire', emoji: '🔥', text: 'Fire' }],
-    ['earth', { type: 'earth', emoji: '🌿', text: 'Earth' }],
-    ['air', { type: 'air', emoji: '💨', text: 'Air' }],
+    ['earth', { type: 'earth', emoji: '🌎', text: 'Earth' }],
+    ['wind', { type: 'wind', emoji: '💨', text: 'Wind' }],
   ]))
 
   const addElement = useCallback((type: string, emoji: string) => {