diff --git a/frontends/pastebin/src/components/features/code-runner/CodeTerminal.tsx b/frontends/pastebin/src/components/features/code-runner/CodeTerminal.tsx
index 24c59e26c..1461ace68 100644
--- a/frontends/pastebin/src/components/features/code-runner/CodeTerminal.tsx
+++ b/frontends/pastebin/src/components/features/code-runner/CodeTerminal.tsx
@@ -32,7 +32,13 @@ export function CodeTerminal({ language, files, entryPoint, controller }: CodeTe
   const terminalEndRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    const el = terminalEndRef.current
+    if (el) {
+      const container = el.closest('[data-testid="terminal-output-area"]')
+      if (container) {
+        container.scrollTop = container.scrollHeight
+      }
+    }
   }, [lines])
 
   const hasErrors = lines.some((line) => line.type === 'error')
diff --git a/frontends/pastebin/src/components/features/python-runner/PythonTerminal.tsx b/frontends/pastebin/src/components/features/python-runner/PythonTerminal.tsx
index a3418755e..6d8a503cf 100644
--- a/frontends/pastebin/src/components/features/python-runner/PythonTerminal.tsx
+++ b/frontends/pastebin/src/components/features/python-runner/PythonTerminal.tsx
@@ -26,7 +26,13 @@ export function PythonTerminal({ code }: PythonTerminalProps) {
   const terminalEndRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    terminalEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+    const el = terminalEndRef.current
+    if (el) {
+      const container = el.closest('[data-testid="terminal-output-area"]')
+      if (container) {
+        container.scrollTop = container.scrollHeight
+      }
+    }
   }, [lines])
 
   // Determine if there are any errors in the output
diff --git a/frontends/pastebin/src/components/features/snippet-display/SnippetCard.tsx b/frontends/pastebin/src/components/features/snippet-display/SnippetCard.tsx
index 94b3e73d6..32dfd3bdd 100644
--- a/frontends/pastebin/src/components/features/snippet-display/SnippetCard.tsx
+++ b/frontends/pastebin/src/components/features/snippet-display/SnippetCard.tsx
@@ -142,7 +142,7 @@ export function SnippetCard({
 
   return (
     <Card
-      className={`group transition-all cursor-pointer${isSelected ? ` border-accent ${styles.cardSelected}` : ''}`}
+      className={`${styles.card} group transition-all cursor-pointer${isSelected ? ` border-accent ${styles.cardSelected}` : ''}`}
       onClick={handleView}
       data-testid={`snippet-card-${snippet.id}`}
       role="article"
diff --git a/frontends/pastebin/src/components/features/snippet-display/snippet-card.module.scss b/frontends/pastebin/src/components/features/snippet-display/snippet-card.module.scss
index 49f9bd546..07faf4f50 100644
--- a/frontends/pastebin/src/components/features/snippet-display/snippet-card.module.scss
+++ b/frontends/pastebin/src/components/features/snippet-display/snippet-card.module.scss
@@ -14,6 +14,18 @@
   gap: 12px;
 }
 
+.card {
+  border: 1px solid var(--mat-sys-outline-variant);
+  background-color: var(--mat-sys-surface-container);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 200ms ease, border-color 200ms ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+    border-color: var(--mat-sys-outline);
+  }
+}
+
 .cardSelected {
   border-color: var(--mat-sys-primary);
   outline: 2px solid color-mix(in srgb, var(--mat-sys-primary) 20%, transparent);