diff --git a/Applications/FontEditor/GlyphEditorWidget.cpp b/Applications/FontEditor/GlyphEditorWidget.cpp
index c78779587e..3e741795b9 100644
--- a/Applications/FontEditor/GlyphEditorWidget.cpp
+++ b/Applications/FontEditor/GlyphEditorWidget.cpp
@@ -2,9 +2,12 @@
 #include <LibGUI/GPainter.h>
 
 GlyphEditorWidget::GlyphEditorWidget(Font& mutable_font, GWidget* parent)
-    : GWidget(parent)
+    : GFrame(parent)
     , m_font(mutable_font)
 {
+    set_frame_thickness(2);
+    set_frame_shadow(GFrame::Shadow::Sunken);
+    set_frame_shape(GFrame::Shape::Container);
     set_relative_rect({ 0, 0, preferred_width(), preferred_height() });
 }
 
@@ -20,20 +23,23 @@ void GlyphEditorWidget::set_glyph(byte glyph)
     update();
 }
 
-void GlyphEditorWidget::paint_event(GPaintEvent&)
+void GlyphEditorWidget::paint_event(GPaintEvent& event)
 {
-    GPainter painter(*this);
-    painter.fill_rect(rect(), Color::White);
-    painter.draw_rect(rect(), Color::Black);
+    GFrame::paint_event(event);
 
-    for (int y = 0; y < font().glyph_height(); ++y)
+    GPainter painter(*this);
+    painter.add_clip_rect(frame_inner_rect());
+    painter.add_clip_rect(event.rect());
+    painter.fill_rect(frame_inner_rect(), Color::White);
+    painter.translate(frame_thickness(), frame_thickness());
+
+    painter.translate(-1, -1);
+    for (int y = 1; y < font().glyph_height(); ++y)
         painter.draw_line({ 0, y * m_scale }, { font().max_glyph_width() * m_scale, y * m_scale }, Color::Black);
 
-    for (int x = 0; x < font().max_glyph_width(); ++x)
+    for (int x = 1; x < font().max_glyph_width(); ++x)
         painter.draw_line({ x * m_scale, 0 }, { x * m_scale, font().glyph_height() * m_scale }, Color::Black);
 
-    painter.translate(1, 1);
-
     auto bitmap = font().glyph_bitmap(m_glyph);
 
     for (int y = 0; y < font().glyph_height(); ++y) {
@@ -83,10 +89,10 @@ void GlyphEditorWidget::draw_at_mouse(const GMouseEvent& event)
 
 int GlyphEditorWidget::preferred_width() const
 {
-    return font().max_glyph_width() * m_scale + 1;
+    return frame_thickness() * 2 + font().max_glyph_width() * m_scale - 1;
 }
 
 int GlyphEditorWidget::preferred_height() const
 {
-    return font().glyph_height() * m_scale + 1;
+    return frame_thickness() * 2 + font().glyph_height() * m_scale - 1;
 }
diff --git a/Applications/FontEditor/GlyphEditorWidget.h b/Applications/FontEditor/GlyphEditorWidget.h
index 9f2fae24cf..40fdef7e9a 100644
--- a/Applications/FontEditor/GlyphEditorWidget.h
+++ b/Applications/FontEditor/GlyphEditorWidget.h
@@ -1,7 +1,7 @@
-#include <LibGUI/GWidget.h>
+#include <LibGUI/GFrame.h>
 #include <AK/Function.h>
 
-class GlyphEditorWidget final : public GWidget {
+class GlyphEditorWidget final : public GFrame {
 public:
     GlyphEditorWidget(Font&, GWidget* parent);
     virtual ~GlyphEditorWidget() override;
diff --git a/Applications/FontEditor/GlyphMapWidget.cpp b/Applications/FontEditor/GlyphMapWidget.cpp
index 23aa93b6c0..e923576582 100644
--- a/Applications/FontEditor/GlyphMapWidget.cpp
+++ b/Applications/FontEditor/GlyphMapWidget.cpp
@@ -2,9 +2,12 @@
 #include <LibGUI/GPainter.h>
 
 GlyphMapWidget::GlyphMapWidget(Font& mutable_font, GWidget* parent)
-    : GWidget(parent)
+    : GFrame(parent)
     , m_font(mutable_font)
 {
+    set_frame_thickness(2);
+    set_frame_shape(GFrame::Shape::Container);
+    set_frame_shadow(GFrame::Shadow::Sunken);
     set_relative_rect({ 0, 0, preferred_width(), preferred_height() });
 }
 
@@ -14,12 +17,12 @@ GlyphMapWidget::~GlyphMapWidget()
 
 int GlyphMapWidget::preferred_width() const
 {
-    return columns() * (font().max_glyph_width() + m_horizontal_spacing) + 2;
+    return columns() * (font().max_glyph_width() + m_horizontal_spacing) + 2 + frame_thickness() * 2;
 }
 
 int GlyphMapWidget::preferred_height() const
 {
-    return rows() * (font().glyph_height() + m_vertical_spacing) + 2;
+    return rows() * (font().glyph_height() + m_vertical_spacing) + 2 + frame_thickness() * 2;
 }
 
 void GlyphMapWidget::set_selected_glyph(byte glyph)
@@ -51,12 +54,15 @@ void GlyphMapWidget::update_glyph(byte glyph)
 
 void GlyphMapWidget::paint_event(GPaintEvent& event)
 {
+    GFrame::paint_event(event);
+
     GPainter painter(*this);
     painter.add_clip_rect(event.rect());
 
     painter.set_font(font());
-    painter.fill_rect(rect(), Color::White);
-    painter.draw_rect(rect(), Color::Black);
+    painter.fill_rect(frame_inner_rect(), Color::White);
+
+    painter.translate(frame_thickness(), frame_thickness());
 
     byte glyph = 0;
 
diff --git a/Applications/FontEditor/GlyphMapWidget.h b/Applications/FontEditor/GlyphMapWidget.h
index 286d5cde83..eb963e3df7 100644
--- a/Applications/FontEditor/GlyphMapWidget.h
+++ b/Applications/FontEditor/GlyphMapWidget.h
@@ -1,9 +1,9 @@
 #pragma once
 
-#include <LibGUI/GWidget.h>
+#include <LibGUI/GFrame.h>
 #include <AK/Function.h>
 
-class GlyphMapWidget final : public GWidget {
+class GlyphMapWidget final : public GFrame {
 public:
     GlyphMapWidget(Font&, GWidget* parent);
     virtual ~GlyphMapWidget() override;